当前位置：首页 > 技术分享 > 正文内容

Flex布局属性详解左对齐右对齐

admin2年前 (2023-10-12)技术分享2231

flex布局利用修改父元素display：flex实现

1 、 flex-direction属性

取值：row（默认）|| row-reverse || column || column-reverse

解释：row为横向排列，顺序为1-2-3. row-reverse为横向排列，但顺序为3-2-1. column为纵向排列，顺序为1-2-3. column-reverse为纵向排列，但顺序为3-2-1

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .main {
        width: 900px;
        height: 100px;
        display: flex;
        flex-direction: column-reverse;
      }
      .box1,
      .box2,
      .box3 {
        width: 300px;
        height: 100px;
        text-align: center;
      }
</style>
<body>
    <div class="main">
      <div class="box1" style="background-color: red">1</div>
      <div class="box2" style="background-color: green">2</div>
      <div class="box3" style="background-color: blue">3</div>
    </div>
</body>

2、 flex-wrap属性

取值：nowrap（默认） || wrap || wrap-reverse

解释：nowrap表示不换行，wrap表示换行，wrap-reverse表示换行，第一排紧紧贴在容器底部。

3、 justify-content属性

取值：flex-start（默认）|| flex-end || center || space-between || space-around

解释：表示横轴对齐方式：flex-start表示左对齐，flex-end为右对齐，center居中对齐，space-between表示左右两端对齐，space-around为项目之间间距为左右两侧项目到容器间距的2倍

3、 align-items属性

取值：flex-start || flex-end || center || baseline || stretch（默认）

解释：表示纵轴排列方式：stretch表示不设置高度，占满整个屏幕。flex-start表示纵轴紧贴容器顶部。center表示在纵轴中心排列。flex-end表示紧贴容器底部。baseline表示以第一行文字的基线为参照

4、 align-content属性

表示多行项目的对齐方式，和align-item一样

5、一行固定个数，超出换行（流式布局）

.father{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.child{
	/* 方法一 */
	flex: 1;
	height: 50px;
	margin: 0 5px 5px 0;
	background-color: #999;
	width: calc((100% - 10px) / 3);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
	min-width: calc((100% - 10px) / 3);// 加入min-width、max-width后每个child的宽度就生效了
	max-width: calc((100% - 10px) / 3);
	
	/* 方法二 */
	/* 
		height: 50px;
		margin: 0 5px 5px 0;
		box-sizing: border-box;
		background-color: #999;
		flex: 0 0 calc((100% - 10px) / 3);
	*/
}
.child:nth-child(3n){
	margin-right: 0;// 去除第3n个的margin-right
}