flex布局

1.flex布局介绍

Flex布局是一种用于创建弹性布局的CSS模型。Flexbox(Flexible Box)布局使得在容器中的子元素可以以弹性的方式进行排列、对齐和分布空间，适应不同的屏幕尺寸和设备。(简易来说flex用来为盒状模型提供最大的灵活性，可以随着页面大小改变自适应页面布局。)

2.容器属性

2.1 display

display属性用于定义一个容器的类型。使用 display: flex属性可以将一个元素变成弹性盒子，从而使用Flex 布局。

任何一个容器都可以指定为flex布局。

效果图：

加入盒子后：

 <div class="demoOne">
    <div class="boxOne">A</div>
    <div class="boxTwo">B</div>
    <div class="boxThree">C</div>
    </div>

.boxOne{
    width: 100px;
    height: 100px;
    background-color: red;
}

.boxTwo{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.boxThree{
    width: 100px;
    height: 100px;
    background-color: green;
}

效果图：

2.2 flex常见的几种属性：

(1) flex-direction:设置主轴方向，默认为row水平方向。

  (2)  column:主轴就是从上到下的垂直方向。

flex-direction: column;

   (3) row:主轴就是从左往右的水平方向，默认值。

flex-direction: row;

   (4) column-reverse:主轴是从上到下的垂直方向。

flex-direction: column-reverse; 

   (5) row-reverse:主轴是从右往左到水平方向。

flex-direction: row-reverse;

2.3 jstify-content

justify-content 属性用于定义弹性盒子沿着主轴方向的对齐方式。常用的取值有:flex-start(默认值，左对齐)、flex-end(右对齐)、c enter(居中对齐)、space-between(两端对齐，项目之间的间隔相等)、space-around(每个项目两侧的间隔相等)。以下我们演示五种常用属性。

(1) flex-start:默认值，项目从主轴起点开始对齐，不留间隙。

justify-content: flex-start;

  (2)  flex-end:从主轴重点对齐，不留间隙。

justify-content: end;

   (3) center:主轴上居中对齐，不留间隙。

justify-content: center;

   (4) space-around:每个项目之间的距离相等。

justify-content: space-around;

  (5)  space-between:两端对齐。

justify-content: space-between;

2.4 align-items

align-items属性用于定义弹性盒子沿着交叉轴方向的对齐方式。常用的取值有:center(居中对齐)、flex-start(顶部对齐)、flex-end(底部对齐)、Flex-line(第一行文字基线对齐)。以下我们演示四种常用属性。

    align-items: 设置项目在交叉轴上的对齐方式 。

   (1) center:交叉轴居中对齐。

align-items: center; 

   

   (2) flex-start:项目定点与交叉轴对齐。

align-items: flex-start;

   (3) flex-end:项目底部与交叉轴终点对齐。

 align-items: flex-end;

   (4) base-line:项目第一行文字基线对齐。

align-items: baseline;

2.5 flex-wrap

flex-wrap 属性用于定义弹性盒子是否可以换行。默认情况下，弹性盒子不换行。可以使用 flex-wrap 属性来控制换行。常用的取值有:nowrap (不换行，默认值)、wrap(换行，第一行在上方)、wrap-reverse(换行，第一行在下方)。

    flex-warp:设置项目是否换行 

   (1) nowrap：不换行

flex-wrap: nowrap;

   (2) warp：换行

flex-wrap: wrap;

  (3)  war-reverse:反方向换行

flex-wrap:wrap-reverse;

2.6 结构伪造选择器

.box:nth-child(5){
    background-color: blue;
}

3.实例演示

下面是一个简单的实例，用于演示flex布局的用法：

<div class="demoTwo">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>

.demoTwo{
    width: 606px;
    height: 606px;
    border: 2px solid blue;
    display: flex;、
    flex-wrap: wrap;
}

.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;

    display: flex;
    align-items: center;
    justify-content: center;
}

.box:nth-child(5){
    background-color: blue;
}

4.总结

flex 布局是一种强大的布局方式，可以帮助我们轻松地实现各种复杂的布局效果。在使用 flex 布局时，我们需要掌握容器属性和项目属性，以及它们的取值和用法。只有掌握了这些知识，才能更好地利用flex布局来实现我们所需的布局效果。