Flex布局小结

什么是Flex布局

Flex就是flexbox ，是一种布局模型
要注意的是使用lex 布局以后，子元素的float、clear和vertical-align属性将失效

Flex的属性和使用

使用display属性指定元素为flex布局

div{
      display: flex;
    }

flex容器.jpg

使用 flex 布局的元素，称为 flex 容器(flex container)。它的所有子元素自动成为容器成员，称为 flex 项目(flex item)。

flex容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction
   决定了项目的方向

div {
  flex-direction: row(默认) | row-reverse | column | column-reverse;
}

row：item从左到右，横向排列

row-reverse：item从右到左，横向排列

column：item从上往下，纵向排列

column-reverse：item从下往上，纵向排列

2. flex-wrap
   控制项目是否换行
   注意如果将flex-direction属性从row(横向)修改为column（纵向），项目可能会在纵轴上并不会等分容器高度，而是直接超出容器

div{
  flex-wrap: nowrap(默认) | wrap | wrap-reverse;
}

nowrap：不换行

wrap：换行。项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

wrap-reverse：换行，第一排会在容器底部，效果与wrap相反

3.flex-flow
它是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4.justify-content
控制项目在横轴（根据direction的值决定，主要说横轴）的对齐方式

div {
  justify-content: flex-start(默认) | flex-end | center | space-between | space-around;
}

flex-start：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items
控制项目在纵轴排列方式

div {
  align-items: flex-start | flex-end | center | baseline | stretch(默认);
}

stretch：如果项目没设置高度，或高度为auto，则占满整个容器

flex-start：会让项目在纵轴紧贴容器顶部
flex-end：会让项目在纵轴紧贴容器底部
center：在纵轴中心位置排列

6.align-content
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用

div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

stretch：即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

flex-start：项目在顶部排列

flex-end：项目在底部排列

center：排列在容器中间

space-between：效果和justify-content一样

space-around：效果和justify-content一样

flex项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1.order
默认为0，数值越小越靠前

.item{
    order: <integer>;
}

2.flex-grow
默认0不放大，用于决定项目在有剩余空间的情况下是否放大

.item {
  flex-grow: <number>;
}

假设第一个项目为0，第二个为1，第三个为2，那么后两个项目按比例平分剩余空间。

3.flex-shrink
默认1，用于决定项目在空间不足时是否缩小
数值为0，即便空间不够，自身也不缩小。
数值不能为负数

.item {
  flex-shrink: <number>;
}

4.flex-basis
默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度
flex-basis权重>width权重,因此会覆盖widtn属性

.item {
  flex-basis: <length> | auto(默认);
}

5.flex
是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。默认0 1 auto

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6.align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
与align-items属性一致

auto(默认)
flex-start
flex-end
center
baseline
stretch

align-self：flex-end图示