22.flex布局qq38903404的博客-

怪异盒模型

content-box   这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 

border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
FLEX布局

Flex容器：采用 Flex 布局的元素的父元素； Flex项目：采用 Flex 布局的元素的父元素的子元素； 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 

弹性盒子：是一个布局方法              作用：弹性盒子控制子元素（不包含孙子辈的元素）的布局方式             特点：                 a.弹性盒子默认情况下是沿着“主轴”排列 默认情况下x轴为主轴 注：主轴可以更改                 b.弹性盒子称作“灵活元素”，所有子元素都可以设置宽高                 c.如果一个子盒子想在弹性盒子里面上上下左右居中，只需要你该子元素加margin:auto;          1.设置弹性盒（添加父元素上）           display:flex;          2.改变主轴方向（添加父元素上）             flex-direction:                 属性值：                     row 默认值，主轴为x轴方向排列                     column 主轴默认y轴方向排列                     row-reverse 主轴为x轴 反向排列                     column-reverse 主轴为y轴 反向排列          3.主轴对齐方式（添加父元素上）             justifiy-content                 属性值：                         flex-start  以弹性盒主轴开始位置对齐                         flex-end    以弹性盒主轴结束位置对齐                         center      在主轴上居中                         space-between   在主轴上两端对齐                         space-round 自动分配主轴空间          4.在侧上对齐方式（添加父元素上）             align-items                 属性值：                     flex-start      侧轴开始的位置                     flex-end        侧轴结束的位置                     center          侧轴中间                     baseline        等效flex-sart                     stretch(默认值)  拉伸          5.是否让子元素超出的时候换行(弹性盒子子元素默认不会换行，在主轴上挤压)             flex-warp                 nowarp 不换行                 warp   换行                 warp-reverse   底部向上显示                  6.控制行与行之间的间距  对单行无效（添加在父元素上面）             align-content                 属性值                     flex-start                     flex-end                     center                     space-between                     space-around                     stretch          7.flex-flow    添加在父元素上面             flex-direction 和 flex-warp的缩写             eg: flex-flow:row warp;     添加在子元素上面的属性                   8.控制某一个元素在侧轴的对齐方式             align-self:                 属性值：                     auto        默认值 元素继承了它的父容器的align-item属性                     stretch     元素被拉伸以适应容器                     center      元素位于容器的中心                     flex-start  元素位于容器的开头                     flex-end    元素位于容器的结尾                      9.控制子元素的排列顺序         order             属性值是一个数字，数字越大越往后面排列，能接收负数             默认值为0                  10.剩余空间分配         flex:1;     （把剩余空间全部分配给当前元素）          flex-shrink:0; 子元素不在主轴挤压 

flex的三兄弟                 flex-grow                     一个数字，规定项目将相对于其他灵活的项目进行扩展的量。                 flex-shrink                     一个数字，规定项目将相对于其他灵活的项目进行收缩的量。                 flex-basis                     项目的长度 

flex布局案例