新人小白一枚,记录学习的一天
部分弹性盒
弹性盒
- 很重要,写在前面
一定要在父元素上定义弹性盒
定义弹性盒之后默认一行显示,要修改默认格式进行换行
设置reverse属性值后对齐方式也会改变,上下互换和左右互换
<style>
.a{
width: 800px;
height: 400px;
background-color: #eee;
/* 父元素定义弹性盒 */
display:flex;
/* display: -webkit-flex; 兼容性写法,写在属性值前面
display: -o-flex; */
/* 定义主轴方向 */
/* column 上下排列 column-reverse 下-上 */
flex-direction:column;
/* row 左右排列 row-reverse 右-左 */
flex-direction:row;
/* 设置主轴对齐方式 */
justify-content:center;
/* justify-content: flex-start; 上端对齐
justify-content: flex-end; 底部对齐 */
/* 两端对齐 */
justify-content: space-between;
/* 两端对齐且两端有间距 */
justify-content: space-around;
/* 侧轴对齐方式 就是垂直方向的对齐*/
align-items:center;
/* align-items:flex-start;
align-items:flex-end; */
/* 当子元素超出父元素之后换行 */
flex-wrap:wrap;
/* 换行后反方向 */
flex-wrap:wrap-reverse;
}
.a div{
width: 100px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="a">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
</div>
</body>
- 使用步骤
- 定义弹性盒 display:flex ;
- 确定主轴方向 flex-direction:row/column/row-reverse/column-reverse;
- 主轴对齐方式 justify-content:flex-start/flex-end/center/space-around/space-between
- 侧轴对齐方式 align-items:flex-start/flex-end/center
- 子元素超出时是否换行 flex-wrap:wrap/nowrap