android flexbox 布局属性 flex 布局常用属性
最编程
2024-04-29 14:02:11
...
1.flex属性：弹性布局
```css
/* 属性一：常规的给父级元素添加display属性 */
#container {
display: flex;
width: 800px;
height: 600px;
background-color: deepskyblue;
}
.item {
background-color: cadetblue;
width: 200px;
margin: 10px;
}2.direction属性：修改元素的排列位置
direction属性可以修改元素的排列位置，使得在浏览器中，原本按照从左到右的顺序进行排列的元素方向发生颠倒，变成从右向左进行排列。
/* 属性二：direction：修改父级元素的排列位置 */
body {
direction: rtl;
}3.flex-direction：指定弹性子元素在父容器中的位置
#container {
display: flex;
width: 800px;
height: 600px;
background-color: deepskyblue;
flex-direction: row-reverse;
}- 左对齐：flex-direction: row;
- 右对齐：flex-direction: row-reverse;
- 纵向排列：flex-direction: column;
- 纵向反向排列：flex-direction: column-reverse;
4.justify-content:应用在弹性容器上，把弹性项沿着主轴线对齐
#container {
display: flex;
width: 800px;
height: 600px;
justify-content: flex-start;
background-color: deepskyblue;
}- 弹性项目向行头紧挨着填充:justify-content: flex-start;
- 弹性项目向行尾紧挨着填充:justify-content: center;
- 弹性项目居中紧挨着填充:justify-content: flex-end;
- 弹性项目平均分布在该行上:justify-content: space-between;
- 弹性项目平均分布在该行上，两边留有一半的间隔空间:justify-content: space-around;
5.align-items:设置或检索弹性盒子元素在侧轴方向上的对齐方式
#container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
6.flex-wrap:用于指定弹性盒子的子元素换行方式
#container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 300px;
height: 250px;
background-color: lightgrey;
}
.item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}- nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
上一篇： CSS Flexbox 布局