1.13 弹性盒子

• 举例
• 容器属性
• 内容属性

举例

    <style>
        .my-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            align-content: space-between;
            
            
        <!--举例使用-->
        div {
            background-color: lightgrey;
            height: 300px;
            margin: 20px;
            display: flex;
        }

        .flex-item {
            background-color: cornflowerblue;
            width: 200px;
            height: 60px;
            margin: 10px;
        }
    </style>

容器属性

• 默认

<div>
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
</div>

• flex-direction 元素方向

<div style="flex-direction: column;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
</div>

row             默认值。灵活的项目将水平显示，正如一个行一样
row-reverse     与 row 相同，但是以相反的顺序
column          灵活的项目将垂直显示，正如一个列一样
column-reverse  与 column 相同，但是以相反的顺序
initial         设置该属性为它的默认值
inherit         从父元素继承该属性

• justify-content 元素水平留白方式

<div style="justify-content: space-between;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
</div>

flex-start      默认值。项目位于容器的开头。
flex-end        项目位于容器的结尾。
center          项目位于容器的中心。
space-between   项目位于各行之间留有空白的容器内
space-around    项目位于各行之前、之间、之后都留有空白的容器内
initial         设置该属性为它的默认值
inherit         从父元素继承该属性

• align-items 元素垂直对齐

<div style="align-items: flex-end;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
    <div class="flex-item">flex item 5</div>
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div>
    <div class="flex-item">flex item 9</div>
    <div class="flex-item">flex item 10</div>
</div>

stretch     默认值。项目被拉伸以适应容器
center      项目位于容器的中心
flex-start  项目位于容器的开头
flex-end    项目位于容器的结尾
baseline    项目位于容器的基线上
initial     设置该属性为它的默认值
inherit     从父元素继承该属性

• flex-wrap 元素换行

<div style="flex-wrap: wrap;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
    <div class="flex-item">flex item 5</div>
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div>
    <div class="flex-item">flex item 9</div>
    <div class="flex-item">flex item 10</div>
</div>

nowrap          默认值。规定灵活的项目不拆行或不拆列
wrap            规定灵活的项目在必要的时候拆行或拆列
wrap-reverse    规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
initial         设置该属性为它的默认值
inherit         从父元素继承该属性

• align-content 内容垂直留白方式（类似 justify-content）

<div style="align-content:space-between;flex-wrap: wrap;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
    <div class="flex-item">flex item 5</div>
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div>
    <div class="flex-item">flex item 9</div>
    <div class="flex-item">flex item 10</div>
</div>

stretch         默认值。项目被拉伸以适应容器
flex-start      项目位于容器的开头
flex-end        项目位于容器的结尾
center          项目位于容器的中心
space-between   项目位于各行之间留有空白的容器内
space-around    项目位于各行之前、之间、之后都留有空白的容器内
initial         设置该属性为它的默认值
inherit         从父元素继承该属性

• flex-flow (flex-direction flex-wrap 的简写)

<div style="flex-flow:row-reverse wrap;">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
    <div class="flex-item">flex item 4</div>
    <div class="flex-item">flex item 5</div>
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div>
    <div class="flex-item">flex item 9</div>
    <div class="flex-item">flex item 10</div>
</div>

flex-flow:row-reverse wrap;

内容属性

• order 元素顺序

number  默认值是 0。规定灵活项目的顺序
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

• align-self 继承容器的 align-items，也可以重定义