Flex布局使用_flex使用-CSDN博客

本文链接：https://blog.csdn.net/qq_45829293/article/details/120464106

文章目录

Flex布局

Flex布局

1、理解

1.1 为何使用

有些布局的垂直居中实现不易，所有使用flex布局来实现

1.2 指定为Flex布局：

任何容器 ------ display：flex；
行内元素 ------ display：inline-flex；

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

1.3 使用flex后失效元素

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2、目前常用四种场景：

定义好宽高的子元素，左排列
子元素，左排列，且均分父元素空间
多个子元素，分布在父元素的两边
多个元素居于正中间

3、属性解释

属性	解释
gap	gap属性属于grid布局中，用来设置网格行与列之间的间隙。（该属性是 row-gap 和 column-gap 的简写形式）

3.1 flex-direction属性----决定主轴排序方向

值	说明
flex-direction: row	主轴为水平方向，起点在最左端，正序。
flex-direction: row-reverse	主轴为水平方向，起点在最右端，倒序
flex-direction: column	主轴为水平方向，正序，元素独占一行（且没有换行属性时不会进行换行，会溢出）
flex-direction: column-reverse	主轴为垂直方向，倒序，元素独占一行（且没有换行属性时不会进行换行，会溢出）

3.2 flex-wrap属性----换行

值	说明
flex-wrap: nowrap	默认不换行（不换行会造成溢出屏幕的情况）
flex-wrap: wrap	换行，第一行在上
flex-wrap: wrap-reverse	换行，第一行在下

3.3 flex-flow属性----flex-direction和flex-wrap的结合体

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

代码举例
.div{ flex-flow: row-reverse wrap-reverse; }	效果：倒序、第一行在下

3.4 justify-content属性----主轴上的对齐方式

值	说明
justify-content: flex-start	左对齐
justify-content: flex-end	右对齐
justify-content: center	居中
justify-content: space-between	两端对齐，项目间间隔相等
justify-content: space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性----交叉轴上如何对齐

值	说明
flex-start	交叉轴的起点对齐。
flex-end	交叉轴的终点对齐。
center	交叉轴的中点对齐。
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 align-content属性----定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

值	说明（截图中的例子的主轴为行row）
flex-start	交叉轴的起点对齐
flex-end	与交叉轴终点对齐
center	与交叉轴中点对齐
space-between	与交叉线两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）	轴线占满整个交叉轴。

表格中截图的源码：

 <style>
     .grid-container{
         border: 5px solid rgb(48, 159, 211);
         height: 150px;
         width: 150px;
         display: flex;
         flex-flow: row wrap;
         align-content: ......;
     }
     .item{
         padding: 10px 10px 10px 10px;   
         border: 1px solid rgb(235, 115, 115);
     }
 </style>
 
 <div class="grid-container">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
     <div class="item">6</div>
     <div class="item">7</div>
     <div class="item">8</div>
     <div class="item">9</div>
 </div>