其他分享
首页 > 其他分享> > flex 布局

flex 布局

作者:互联网

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="context">
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>
<div class="box">c</div>


</div>
</body>

<style>
.context {
width: 100%;
height: 100vh;

display: flex;

/* 默认从左到右 */
/* flex-direction: row; */

/* 从右到左 */
/* flex-direction: row-reverse; */

/* 从上到下 */
/* flex-direction: column; */

/* 从下到上 */
/* flex-direction: column-reverse; */

 

/* justify-content 设置主轴 */
/* 默认从左到右 */
/* justify-content: flex-start; */

/* 居中 */
/* justify-content: center; */

/* 从尾部排齐,向右靠齐 */
/* justify-content: flex-end; */

/* 两边贴边,剩余平分空间 */
/* justify-content: space-between; */

/* 平分剩余空间 */
/* justify-content: space-around; */

/* 向左对齐 */
/* justify-content: space-evenly; */


/* flex布局默认不换行,如果装不下,会缩小子元素的宽度,放到父元素里面 */
/* 默认不换行 */
/* flex-wrap: nowrap; */

/* 换行 */
/* flex-wrap: wrap; */


/* align-items 设置侧轴上的子元素排列方式(单行) */
/* 默认从上到下 */
/* align-items: flex-start; */

/* 在侧轴的尾部开始排列 */
/* align-items: flex-end; */

/* 挤在一起,居中 */
/* align-items: center; */

/* 拉伸 */
/* align-items: stretch; */

 


/* align-content 设置侧轴上子元素的排列方式(多行) */
/* 默认 在侧轴头部开始排列 */
/* align-content: flex-start; */

/* 在侧轴的尾部开始排列 */
/* align-content: flex-end; */

/* 在侧轴中间显示 */
/* align-content: center; */

/* 子项在侧轴平分剩余空间 */
/* align-content: space-around; */

/* 子项在侧轴先分布在两头,再平分剩余空间 */
/* align-content: space-between; */

/* 设置子项元素高度平分父元素高度 */
/* align-content: stretch; */

 


/* 居中屏幕 */
/* align-items: center;
justify-content: center; */


}

.box {
width: 300px;
height: 300px;
background: blue;
margin: 20px 20px 20px 20px;

}
</style>

</html>

标签:flex,center,items,align,布局,content,justify
来源: https://www.cnblogs.com/dinglong/p/14989015.html