CSS第九章 移动端布局-Flex弹性盒模型

Flex弹性盒模型

好处：FLex布局可以简便、完整、响应式地实现各种页面布局 (特殊布局如垂直居中，最适合一维布局)。

例子：在父容器上加display: flex;

<style>
    #parent{
      width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex;}
    #box{
      width:100px; height:100px; background:red; margin:auto;}
</style>
<div id="parent">
    <div id="box"></div>
</div>

属性分类：

作用在flex容器上的CSS属性

1. flex-direction

用来控制子项整体布局方向（从左往右 / 从右往左 / 从上往下 / 从下往上）

<style>
    #box{
      width:300px;height:300px; border:1px black solid; margin:20px auto; display: flex; flex-direction:row-reverse;}
    #box div{
      width:50px; height:50px; color:white; line-height:50px; text-align: center; background:red;}
</style>
<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

不写默认flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2. flex-wrap

用来控制子项整体单行显示还是换行显示

默认情况下，当flex布局中子元素整体宽度大于容器时，子容器宽度会自行调节,但是子容器宽度是由内容决定的，若内容太多，无法再被压缩时，子容器也会溢出

<div id="box2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

此时子容器宽度不再是设置的50px，而是自己调节成37.6px

<div id="box2">
    <div>11111</div>
    <div>21111</div>
    <div>31111</div>
    <div>11111</div>
    <div>21111</div>
    <div>31111</div>
    <div>11111</div>
    <div>21111</div>
    <div>31111</div>
&