CSS之flex布局

最新推荐文章于 2023-03-15 23:11:41 发布

我真是卷的不得了

最新推荐文章于 2023-03-15 23:11:41 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/jaycemxy/article/details/79529796

版权

//设置了flex属性以后，子元素的float、clear、vertical-align属性将失效。

flex布局有以下六个属性：

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

align-content

1、flex-direction属性决定主轴的排列方向：（附几张很好理解的图示）

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

2、flex-wrap属性定义，如果一条轴线排不下，如何换行：

 flex-wrap:
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3、flex-flow属性，是flex-direction和flex-wrap的简写形式，默认值为row-nowrap

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

4、justify-content，定义了水平线上的对齐方式

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

5、align-items，定义了交叉轴上的对齐方式

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

6、align-content属性，定义了多根轴线的对齐方式（若项目里只有一根轴线，该属性不起作用）

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

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

布局技巧：

给父元素设置：

display:flex；

1、左右布局：

.box {
  justify-content: space-between;
}

2、水平居中：

.box {
  justify-content: center;
}

3、垂直居中：

.box {
  align-items: center;
}

4、水平垂直居中：

.box{
  align-items: center;
  justify-content: center;
}

5、左中右布局：

html

<body>
<div id="content">
    <div id="left"> </div>
    <div id="middle"></div>
    <div id="right"></div>
</div>
</body>

css

*{
  margin: 0;
  padding: 0;
}
#content {
  display: flex;
  width: 100%;
  height: 200px;
}
#left {
  flex:0 0 200px;
  height: 100%;
  background-color: red;
}
#middle{
  flex: 1;
  background-color: blue;
}
#right {
  flex:0 0 200px;
  height: 100%;
  background-color: yellow;
}

我真是卷的不得了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之flex布局

//设置了flex属性以后，子元素的float、clear、vertical-align属性将失效。flex布局有以下六个属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1、flex-direction属性决定主轴的排列方向：（附几张很好理解的图示）flex-direction:row（默认值）：...
复制链接

扫一扫