flex布局

hd2345
109 阅读3分钟

flex布局

一.flex是什么

  • flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

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

.box{
    display:flex;
}

行内元素也可以使用flex布局

.box{
   display: inline-flex;
}

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

.box{
    display: -webkit-flex;
    display: flex;
}

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

二.为什么需要flex

  • 解决元素居中问题
  • 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

三.容器的属性

以下6个属性设置在容器上

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction 属性
flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

QQ图片20220602145718.png

QQ图片20220602145721.png

QQ图片20220602145734.png

QQ图片20220602145737.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.box{
    display: flex;
    width: 300px;
    height: 300px;
    background-color: rgb(219, 219, 219);
}
.box{
    flex-direction: row;                    /*沿水平方向，由左到右。 */
    /* flex-direction: row-reverse; */      /*沿水平方向，由右到左 */
    /* flex-direction: column; */           /*表示垂直方向，由上到下 */
    /* flex-direction: column-reverse; */   /*表示垂直方向，由下到上*/
}
.item{
    padding: 100px;
}
.red{
    width: 50px;
    height: 50px;
    background-color: red;
}
.green{
    width: 50px;
    height: 50px;
    background-color: green;
}
.blue{
    width: 50px;
    height: 50px;
    background-color: blue;
}
</style>
<body>
    <div class="box">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
    </div>
   
</body>
</html>

3.2 flex-warp属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap(默认)：表示不换行
wrap：正常换行,第一行在上方
wrap-reverse：向上换行，第一行位于下方

QQ图片20220602152244.png

QQ图片20220602152247.png

QQ图片20220602152250.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    
    flex-wrap: nowrap;                 /*不换行。 */
    /* flex-wrap: wrap;                    /*换行，第一行在上方。 */
    /* flex-wrap: wrap-reverse;        /*换行，第一行在下方。*/
}

 div{
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div class="box">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
  <div style="background-color: goldenrod;">G</div>
  <div style="background-color:firebrick;">H</div>
</div>


</body>
</html>

3.3 flex-flow属性
flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为row nowrap,

第一个属性值为flex-direction的属性值
第二个属性值为flex-wrap的属性值

3.4 justify-content属性
justify-content属性用于设置项目在容器中的对齐方式。

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。

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

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

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

四.项目的属性

以下6个属性设置在项目上

  • flex
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性
order属性设置项目排序的位置，默认值为0，数值越小越靠前

.green-item{ order:-1; }

4.2 flex-grow属性
flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

.green-item{ order:-1; flex-grow:2; }

4.3 flex-shrink属性
flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

4.4 flex-basis属性
flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

4.5 flex属性
flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

.item{ flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto) }

4.6 align-self属性
align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式

.item{ align-self: flex-start | flex-end | center | baseline | stretch }
avatar
文章
阅读
粉丝