flex 布局

Posted 2021-01-29 a-qiang

flex布局就是弹性布局，任何一个容器都可以指定flex布局

display: flex； /* 定义容器为弹性布局，该容器表现为块级元素 */

display: inline-flex;  /* 定义容器为行内弹性布局,可以为它设置高度 */

div, span都是块级弹性布局:

div, span{ 
  display: flex;
}

div,span都是行内布局(不换行,但可以设置高度):

div, span{
  display: inline-flex;
}

弹性布局分为两大块:

弹性容器(父)的属性  和 项目(子)元素的属性；

父容器的属性：

1. flex-direction  规定了子元素的排列方向:

  row 默认值,从左到右水平排列

  row-reverse 从右到左水平排列

  column 从上到下垂直排列

  column-reverse 从下到上垂直排列

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

 2. flex-wrap 规定了如果子元素在改排列方向排不下改怎么换行:

  nowrap 默认值,不换行,如果子元素排不下会自动缩小该方向的值

  wrap 换行,排不下的子元素会另起一行

  wrap-reverse 换行,排不下的元素另起一行,并且排在之前元素的前边

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. flex-flow 是 flex-direction、flex-wrap的简写 

4. justify-content 规定了子元素在该排列方向的对齐方式

  flex-start 默认值,从排列方向的起始方向对齐

  flex-end 起始方向的反方向对齐

  center 居中对齐

  space-between 两端对齐

  space-around 子元素间隔相等,也就是说每个子元素的margin相等(除了行末最后一项)

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

5.align-items  规定了子元素在该排列方向上的另外一个轴的对齐方式(flex-direction规定从左到右排列，那么align-items就是规定子元素从上到下怎么对齐的)

  stretch 默认值，子元素未设置(或者设为auto)高度或者宽度时该属性将占满整个父容器的高或者宽

  flex-start 起始方向对齐(和子元素中的第一项的方向对齐)

  flex-end 终点方向对齐(和子元素中的最后一项的方向对齐)

  center 居中对齐

  baseline 和子元素的第一行文字对齐

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
}

 

6.align-content  规定了当子元素有多行的时候对齐方式

  stretch 默认值，占满，剩余空间平均分

  flex-start 起点对齐

  flex-end 终点对齐

  center 居中对齐

  space-between 两端对齐

  space-around 子元素间隔相等,也就是说每个子元素的margin相等(除了行末最后一项)

div{
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse；
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around
}

 

 

子项目属性(容器内元素):

1.order 数值 默认为0,排序越小排列越靠前

2.flex-grow 数值 默认值0不放大, 规定子元素的放大比例(每个子元素都设置为1就是等分父容器的剩余空间，如果有剩余空间的话)

3.flex-shrink 数值  默认值1缩小, 父容器不够大的时候是否缩小子元素,默认是缩小,当有子元素设为0的时候它本身不缩小，其他值为1的等比缩小

4.flex-basis  默认值为auto, 根据这个属性的值来计算父容器剩余空间

5.flex  前面2.3.4的简写形式 默认值  0 1 auto 该属性有两个直接值 auto (1,1,auto)就是根据父容器来伸缩，none(0,0,auto) 不伸缩

6.align-self  可以更改父容器align-items规定的值