手记

Flex布局之父元素属性的总结

flex布局之父元素的属性

这是在学习小程序的时候,建议使用flex布局,所以就学习了flex布局,尽管之前也听说了flex布局的好处,在分析css框架的时候也经常看见过,但是却从未真正使用过。。。我是参考了CSDN里的博客写的,地址如下

CSDN:flex布局


所有的flex布局必须把父元素的display设置成flex,才能够使用flex布局

display:flex;

父元素下的子元素都可以称为一个item,接下来就是控制item们的方向了

flex-direction:row||column||row-reverse||column-reverse
  1. row 属性 就是在一行排布
  2. column 属性 就是在列排布
  3. row-reverse 属性 就是和row反着干
  4. column-reverse 属性 就是和 column反着干

有时候内容过多我们需要换行,就像textarea一样,文字过多就会自动换行

flex-wrap:nowrap||wrap||wrap-reverse;
  1. nowarp 属性 很好理解,就是不换行了

  2. wrap 属性 也很好理解,就是正常的换行

  3. wrap-reverse 属性 特殊点是换行的时候第一行会跑到下面

有个属性综合上述两个属性,类似background类型的属性啦

flex-flow:<flex-direction>||<flex-wrap> 默认值是 row 和 nowrap

水平方向的item们的对齐方式

justify-content:flex-start || flex-end || center || space-between || space-around
  1. flex-start 就是右对齐
  2. flex-end 从右开始到左结束,所以是左对齐啦
  3. center 居中对齐
  4. space-between 两端对齐,item直接的间隔是相等,这个有点类似 兄弟选择器 ‘+’ 设置的水平外边距
  5. space-around 每个item两侧的间隔相等。需要注意的是,这里强调的是每个item有固定的外边距,所以边框的外边距是item之间的一半。

定义在竖直方向的位置,我个认为这是最最迷人的属性了

align-items:flex-start || flex-end || center || baseline || stretch
  1. flex-start item在父元素的顶部 注意是从上到下的
  2. flex-end item在父元素的底部 注意是从上到下的
  3. center 让你和position定位说再见的属性,让你轻松垂直居中的属性了
  4. baseline item的第一行文字的基线对齐。

定义多行的垂直对齐方式,注意只有一行的时候,是不起作用的,这时候就使用 justify-content 或者align-items

 align-content:flex-start || flex-end || center || space-between || space-around || stretch
  1. flex-start 属性 column是向顶部靠拢的,和align-items的flex-start 是一样的
  2. flex-end 属性 column 是向底部靠拢的,和align-items的flex-end 是一样的
  3. center 属性 column 向中部靠拢,和align-items的center 是一样的
  4. space-between 属性 column的垂直方向的行距是相等的,两端和父元素对齐,和justify-content的space-between 类似
  5. space-around 属性 column 的垂直方向的两边的行距是相等的,不会重叠,也就是行与行的边距是第一行到父元素的边距的两倍。
  6. stretch 属性 column 布满整个父元素
5人推荐
随时随地看视频
慕课网APP