弹性盒子:
display: flex; :是把设置此属性的这块区域(设置此属性的元素)变为弹性盒子,使得此元素的直接子元素按照从左到右的顺序一行排列
如果盒子变小(比子元素的宽度或高度小),里面的直接子元素会随着盒子的变化而变化,同时一直保持从左往右一行排列的布局
direction :rtl 属性为 rtl
(right-to-left) 此属性是设置盒子内的直接子元素 从右往左,一行排列 ,盒子内的直接子元素遵循上面的变化规律
以下为示例: 蓝色:弹性盒子 灰色:弹性盒子直接子元素 紫色:弹性盒子间接子元素(弹性盒子 子元素的子元素)
HTML代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<body> <div class="hz"> <!--弹性盒子--> <div class="l_1"> <!--直接子元素1--> 1: <div class="l_a">a</div> <!--间接子元素a--> <div class="l_b">b</div> <!--间接子元素b--> <div class="l_c">c</div> <!--间接子元素c--> </div> <div class="l_2"> <!--直接子元素2--> 2: </div> <div class="l_3"> <!--直接子元素3--> 3: </div> </div> </body>
CSS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/*弹性盒子*/ .hz{ direction: rtl; display: flex; width: 160px; height: 500px; background-color: aquamarine; } .l_1,.l_2,.l_3{ width:200px; height: 200px; background-color: #ccc; margin: 10px; } .l_a,.l_b,.l_c{ width: 50px; height: 50px; background-color: blueviolet; margin: 5px; }
效果图:
更改弹性盒子的宽度之后:
更改弹性盒子的高度之后不能改变高度:
去掉direction :rtl 后,从左往右一行排列
flex-direction :指定了弹性盒子的直接子元素在盒子内的排列顺序、方式;
flex-direction 属性的介绍
- row:横向从左到右排列(左对齐),默认的排列方式。
- row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
- column:纵向排列。
- column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
横向排列时,随着盒子宽度的变化,直接子元素的宽度随之变化,高度不变
纵向排列时,随着盒子高度的变化,直接子元素的高度随之变化,宽度不变
justify-content 属性
flex-start:弹性项目向行头紧挨着填充。
flex-end:弹性项目向行尾紧挨着填充。
center: 弹性项目居中紧挨着填充。
space-between:弹性项目平均分布在该行上。
space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间。
效果图:
align-items:纵向的排列方式
stretch(默认值): 使盒子内直接子元素的高度和盒子一样高
flex-start: 使盒子内直接子元素靠近盒子顶部排列
flex-end: 使盒子内直接子元素靠近盒子底部排列
cente: 使盒子内直接子元素在盒子纵向距离的中间位置
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
flex-wrap : 指定弹性盒子的子元素换行方式
nowrap:默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap:弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse:反转 wrap 排列。
。。。。。。