文章目录（PS：觉得不错请点赞收藏支持一下）

一、布局之间的关系
二、`flex` 布局

一、布局之间的关系

默认布局：块元素上下排列，行内元素一行从左到右排列
浮动布局：可以将元素一行排列，设置元素靠左和靠右排列
定位布局：可以将元素放到指定的位置

总结

每种布局方式都有优点和缺点
几种布局方式之间不是互相取代的关系，而是互相配合，互相辅佐
几种布局方式之间，存在重复的地方，比如将两个元素一个靠左，一个靠右，使用浮动和定位都可以实现

二、`flex` 布局

2.1 `flex` 布局是什么

说明
- flex 是 Flexible Box 的缩写，意思是"弹性布局"，用来为盒状模型提供最大的灵活性。
- 任何一个容器都可以指定为 flex 布局。
注意
- Webkit 内核的浏览器，必须加上-webkit前缀。
```
.box {
       
    display: -webkit-flex;
}
```
- 设置为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性都将失效。

2.2 基本概念

说明
- 采用 flex 布局的元素，称为 flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称"项目"。
- 容器默认存在两根轴：水平的主轴和垂直的交叉轴。
  - 主轴又分主轴的开始位置和结束位置
  - 交叉轴同样也分开始位置和结束位置
- 项目默认沿着主轴排列

看下图展示

2.3 容器的属性

2.3.1 `flex-direction`属性

说明
- flex-dirction属性决定主轴的方向（即项目的排列方向）
属性值
- row：默认值，主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在顶部
- column-reverse：主轴为垂直方向，起点在底部

语法

.box {
     
    flex-direction: row | row-reverse | column | column-reverse;
}

2.3.2 `flex-wrap`属性

说明
- 默认情况下，项目都排在一条线（轴线）上
- flex-wrap 属性用来设置换行
属性值
- nowrap：默认值，不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。

2.3.3 `flex-flow` 属性

说明
- flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合(结合)属性。
- 可以使用 flex-direction 的属性值
- 也可以使用 flex-wrap 的属性值
- 没有顺序
- 默认值是 row nowrap

2.3.4 `justify-content` 属性

说明
- 用来定义项目在主轴上的对齐方式
属性值
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。
- space-evenly：分散对齐

2.3.5 `align-items`属性

说明
- 用来定义项目在交叉轴上如何对齐
属性值
- stretch：默认值，如果项目没有设置高度或设为 auto，将占满整个容器的高度。
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：项目的第一行文字的基线对齐

2.3.6 `align-content` 属性

说明
- 用来设置定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。
属性值
- stretch：默认值，轴线占满整个交叉轴。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间间隔平均分布。
- space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。

2.4 项目的属性

2.4.1 `order` 属性

说明
- 用来定义项目的排列顺序。
- 数值越小（包含负值），排列越靠前。
- 默认值为 0

示例

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css

<style> .box {
       
        margin: 100px auto;
        display: flex;
        width: 800px;
        background-color: orange;
    }

    .box div {
       
        width: 100px;
        height: 100px;
        margin-right: 10px;
        color: #fff;
        background-color: black;
    }

    .box div:nth-child(2) {
       
        order: -1;
    }
</style>

效果如下

2.4.2 `flex-grow`属性

说明
- 用来定义项目的放大比例
- 默认值为 0 ，即如果存在剩余空间也不放大
注意
- 如果所有项目的 flex-frow属性都为 1，则它们将等分剩余空间（前提容器还有剩余空间）。
- 如果一个项目的 flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

示例

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css

<style> .box {
       
        margin: 100px auto;
        display: flex;
        width: 800px;
        background-color: orange;
    }

    .box div {
       
        width: 100px;
        height: 100px;
        margin: 10px;
        color: #fff;
        background-color: black;
        flex-grow: 1;
    }

    .box div:nth-child(2) {
       
        flex-grow: 2;
    }
</style>

效果如下

2.4.3 `flex-shrink` 属性

说明
- 用来定义项目的缩小比例，数值越大，收缩程度越大。
- 默认值为 1，即如果容器空间不足，该项目将缩小。
注意
- 负值对该属性无效
- 如果所有项目的 flex-shrink 属性都为 1，当容器空间不足时，都将等比例缩小。
- 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，当容器空间不足时，为 1 的项目不收缩。

示例

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css

<style> .box {
       
        margin: 100px auto;
        display: flex;
        width: 800px;
        background-color: orange;
    }

    .box div {
       
        width: 400px;
        height: 100px;
        margin: 10px;
        color: #fff;
        background-color: black;
        flex-shrink: 1;
    }

    .box div:nth-child(2) {
       
        flex-shrink: 2;
    }   
</style>

效果如下

2.4.4 `flex-basis` 属性

说明
用来设置项目占据的主轴空间，它的优先级大于 width 和 height 属性。
浏览器会根据这个属性，计算主轴是否有多余空间。
默认值为 auto，即项目的本来大小。

示例

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css

<style> .box {
       
        margin: 100px auto;
        display: flex;
        width: 800px;
        background-color: orange;
    }

    .box div {
       
        flex-basis: 200px;
        /* width属性无效 */
        width: 100px;
        height: 100px;
        margin: 10px;
        color: #fff;
        background-color: black;
    }
</style>

效果如下

2.4.5 `flex` 属性

说明
- 它是 flex-grow、flex-shrink、flex-basis 属性的简写。
- 默认值为 0 1 auto，后两个属性可选。
注意
- 值为 auto 时，等同于 flex: 1 1 auto 。
- 值为 none 时，等同于 flex: 0 0 auto 。
- 指定一个数字 1 时，等同于 flex: 1 1 0 。
- 指定两个数字时，第一个为 flex-grow，第二个为 flex-shrink，如果第二个表示是宽度值则是 flex-basis。
- 指定三个值，分别是 flex-grow，flex-shrink，flex-basis。

2.4.6 `align-self` 属性

说明
- 该属性允许单个项目有与其他项目不一样的对齐方式。
- 可覆盖 align-items 属性。
- 默认值为 auto，表示继承父元素的 align-items 属性。
- 如果没有父元素，则等同于 stretch，占满整个容器的高度。
属性值
- 除了 auto，其他都与 align-items属性完全一致。

示例

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

css

<style> .box {
       
        margin: 100px auto;
        display: flex;
        align-items: center;
        width: 800px;
        height: 400px;
        background-color: orange;
    }

    .box div {
       
        width: 100px;
        height: 100px;
        margin: 0 10px;
        color: #fff;
        background-color: black;
    }

    .box div:nth-child(2) {
       
        align-self: flex-start;
    }
</style>

效果如下

欢迎各界大佬来评论(●’◡’●)

CSS—弹性盒子布局（一看就懂）

文章目录（PS：觉得不错请点赞收藏支持一下）

一、布局之间的关系

二、flex 布局

2.1 flex 布局是什么

2.2 基本概念

2.3 容器的属性

2.3.1 flex-direction属性

2.3.2 flex-wrap属性

2.3.3 flex-flow 属性

2.3.4 justify-content 属性

2.3.5 align-items属性

2.3.6 align-content 属性

2.4 项目的属性

2.4.1 order 属性

2.4.2 flex-grow属性

2.4.3 flex-shrink 属性

2.4.4 flex-basis 属性

2.4.5 flex 属性

2.4.6 align-self 属性

二、`flex` 布局

2.1 `flex` 布局是什么

2.3.1 `flex-direction`属性

2.3.2 `flex-wrap`属性

2.3.3 `flex-flow` 属性

2.3.4 `justify-content` 属性

2.3.5 `align-items`属性

2.3.6 `align-content` 属性

2.4.1 `order` 属性

2.4.2 `flex-grow`属性

2.4.3 `flex-shrink` 属性

2.4.4 `flex-basis` 属性

2.4.5 `flex` 属性

2.4.6 `align-self` 属性