flex布局（笔记）

news2025/5/23 2:52:47

弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

主轴与交叉轴：弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。

案例1：

      .box
        {
            /* 一般网页开发1200px会用得比较多 */
           width: 1200px;
           height: 600px;
           margin: auto;
           border: 1px black solid;
           background-color: rgb(43, 174, 226);
        }
        /* 设置成flex容器 */
        .flex
        {
            display: flex;
          
        }

        
        .item
        {
            width: 250px;
            /* 不设置高度默认被拉伸 */
            height: 250px;
            border: 1px black solid;
            box-sizing: border-box;
        }

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

flex-direction: 改变主轴的位置和方向默认row 行为主轴列为交叉轴（一般开发不改变）

默认： flex-direction: row;

flex-direction: row-reverse;主轴反转从右按顺序一开始

flex-direction: column;现在主轴变为列行变为交叉轴

flex-direction: column-reverse;现在主轴变为列反转

下面重点：

不适用于父级里面的多个直系子元素有不同的位置和功能

只有一行div布局的话 justify-content就够用了

justify-content:在主轴上的对齐方式

justify-content: flex-start;默认在左

justify-content: center;在主轴上居中（以前只能自身单个去居中）

justify-content: flex-end;整个移到最右边

justify-content: space-around;每个元素自身两边留的空距是一样的最左最右两侧仅有一边的距离

justify-content: space-between;两个div之间的空距相同

justify-content: space-evenly;每个元素自身两边留的空距是一样的每一个空距都很平均

案例二：再多四个div，如何换行

<div class="box flex just ">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <!-- 再加四个发现元素变小了 默认不会换行 挤不下就平均压缩每一个div大小-->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
     </div>

默认nowrap不换行换行后 flex每行大小均等分成两份，每行对应一个flex容器，都有各自的主轴和交叉轴（会用就行了）

flex-wrap: wrap; 默认排列

align-content：align-content用在换行后，行之间的对齐方式以及空距（通常与justify-content配合）

align-content: center;两行贴在一起居中

align-content: space-around每行自身两边留的空距是一样的最左最右两侧仅有一边的距离;

align-content: space-between;两行之间的空距相同

align-content: space-evenly;每个元素自身两边留的空距是一样的每一个空距都很平均

align-content: flex-end;在底部且两行贴起来了均分高度失效

align-content: flex-start;

结果：align-content: space-evenly;justify-content: space-evenly;配合

align-content: space-evenly;justify-content: space-between;配合

补充：flex容器里如果三个子元素的宽度的比是3:2:1 如何解决

flex: 比例数字;

 .con-1
        {
            flex: 3;
            background-color: rgba(170, 182, 62, 0.707);
        }
        .con-2
        {
            flex: 2;
            background-color: rgb(77, 127, 193);
        }
        .con-3
        {
            flex: 1;
            background-color: antiquewhite;
        }
<div class="box-1 flex" style="width: 1200px;height: 500px;">
        <div class="con-1">1</div>
        <div class="con-2">2</div>
        <div class="con-3">3</div>
    </div>