flex布局

小羽苏

已于 2022-11-06 17:31:39 修改

阅读量158

点赞数

分类专栏：前端基础（HTML/CSS）文章标签：前端 css html5 css3

于 2022-10-24 20:23:56 首次发布

本文链接：https://blog.csdn.net/qq_52773679/article/details/127498520

版权

前端基础（HTML/CSS）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Flexible Box （弹性盒）模型，通常被称为 flexbox，是一种一维的布局模型。使用flex布局，对于以前相对较难实现的样式更加简单，在使用flex以前需要了解一些概念。

轴线

flex布局是相对于两条轴线进行布局，分别是主轴（Main Axis）与交叉轴（Cross Axis），主轴可以通过属性flex-direction进行指定，交叉轴则垂直于主轴。默认条件下，主轴与交叉轴的方向如图

以开启flex的容器（flex container）的左上顶点为原点，向右为主轴，向下为交叉轴

在这里插入图片描述

Flex 容器

flex容器指的是开启flex布局的元素，其直接子元素又叫做flex元素（flex item）

通过display: flex; 或 display: inline-flex

当元素变为flex容器之后，其直接子元素，不再严格区分块级元素与行内元素

但是容器本身还是区分的，由上面的两个属性值可以看出

使用

想要使用flex就要先开启弹性盒布局，通过设置display属性值为flex或inline-flex开启。之后通过设置作用于容器或flex 元素的属性来完成布局

作用于容器的属性

flex-direction：设置主轴方向
- row：默认值，按行从左至右
- row-reverse：按行从右至左
- column：按列从上至下
- column-reverse：按列从下至上

交叉轴与主轴保持垂直

flex-wrap：是否换行
- nowrap ：默认值，不换行，如果超出范围按照主轴进行压缩排列
- wrap：换行
- wrap-reverse：换行，但是从主轴的对面开始排列，方向还是按照主轴（按我的理解看是这样）

由于flex为一维布局，所以开启换行之后，应该把每一行，看成一个新的容器，

justify-content：主轴对齐方式
- stretch：均匀排列每个元素
- flex-start：主轴开始位置开始排列
- flex-end：主轴结束位置开始排列
- center：居中
- space-around：均匀排列每个元素，元素周围分配相同空间
- space-between：均匀排列每个元素，首尾元素分别放于起点终点
- space-eveny：均匀排列每个元素，每个元素之间的间隔相同

还有其他属性值justify-content，具体效果还是要自己试一试才知道

align-items：交叉轴对齐方式
- center：居中
- flex-start
- flex-end

align-items:其他属性值

flex-flow：是 1，2的缩写属性

作用于flex元素的属性

order：指定元素的排列顺序，默认值是0，数越大排列越后，可以是负数

 <style>
      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 400px;
        height: 400px;
        background-color: #ccc;
        font-size: 28px;
      }
      .box .item {
        width: 100px;
        height: 100px;
        background-color: #3786d6;
      }
      .item1 {
        order: 3;
      }
      .item3 {
        order: -4;
      }
    </style>
 <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
</div>