前端布局—flex布局

最新推荐文章于 2023-04-10 12:46:29 发布

hululugogo

最新推荐文章于 2023-04-10 12:46:29 发布

阅读量208

点赞数

分类专栏： CSS 前端前端布局

本文链接：https://blog.csdn.net/weixin_43622279/article/details/119419695

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

前端布局

1 篇文章 0 订阅

订阅专栏

文章目录

flex布局

flex布局的优点

操作方便，布局极为简单，移动端应用广泛
PC端浏览器支持情况较差
IE 11或更低版本，不支持或仅部分支持

flex布局原理

flex是flexible Box的缩写，意为“弹性盒子”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”
flex布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局常见的父项属性

属性	作用
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行（多行）
align-items	设置侧轴上的子元素排列方式（单行）
align-content	设置侧轴上的子元素的排列方式（多行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction设置主轴的方向

主轴与侧轴（行和列、x轴和y轴）

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下
- 属性值
  
  flex-direction属性决定主轴的方向，主轴和侧轴是会变化，就看设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的
  
  属性值说明
  row 默认值从左到右
  row-reverse 从右到左
  column 从上到下
  column-reverse 从下到上

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content设置主轴上的子元素排列方式

属性值：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称“轴线”）上，flex-wrap属性定义，flex布局中默认是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。
- 属性
  
  属性说明
  nowrap 默认值，不换行
  wrap 换行

属性	说明
nowrap	默认值，不换行
wrap	换行

align-items（单行）设置侧轴上的子元素排列方式

该属性是控制子项在侧轴上的排列方式，在子项为单项的时候使用

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（子盒子不设高度，随着父盒子高度拉伸）

    /*让三个子盒子垂直居中样式*/  
      .main {
            display: flex;
            justify-content: center;//
            align-items: center;
            width: 800px;
            height: 400px;
            background-color: cornflowerblue;
        }

        .a,
        .b,
        .c {
          /*将块级元素转换为行内块元素*/
            display: inline-block;
            width: 150px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }  

      /*盒子*/
     <div class="main">
        <div class="a">1</div>
        <div class="b">2</div>
        <div class="c">3</div>
     </div>

align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

属性值	说明
flex-start	默认值从头部开始
flex-end	在侧轴的尾部开始
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow复合属性，相当于同时设置了flex-direction和flex-wrap
```
flex-flow:row wrap;
```

flex布局子项常见属性

属性值	说明
flex	默认0，子项目占的份数
align-self	控制子项目自己在侧轴的排列方式
order	定义子项的排列顺序（前后排列）

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item{flex:<number>;/* 默认0*/}

 section {
            display: flex;
            width: 60%;
            height: 200px;
            background-color: salmon;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 200px;
            background-color: sandybrown;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: seashell;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 200px;
            background-color: sandybrown;
        }
/*盒子*/
 <section>
        <div></div>
        <div></div>
        <div></div>
    </section>

align-self属性

align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch。
```
span:nth-child(2){
  /*设置自己在侧轴上的排列方式*/
  align-self：flex-end;
}
```
order属性

数值越小，排列越靠前，默认为0