flex布局(一) : container和items
案列演示
案例.png
<style>
.container{
width: 500px;
height: 200px;
/* 父元素container设置display开启flex布局 */
display: flex;
border: 1px solid #000;
}
.item{
/* 子元素container设置width、height、color等具体样式 */
width: 100px;
height: 100px;
background: #22A6F1;
margin: 10px;
}
</style>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
1.flex布局的container和item
- 开启flex布局的父元素叫flex container
- 在父元素容器下的子元素叫flex item
- 在父元素container设置
display:flex / inline-flex开启flex布局 - flex和inline-flex区别在于，设置inline-flex时父元素container以inline行内元素存在
正常开发时多数情况使用display:flex - 父元素container用来控制子元素item位置排列方式
在子元素item设置width、height、color等具体内容样式
2.flex布局的主轴main axis和交叉轴cross axis
axios.png
主轴和交叉轴既可以是水平方向也是可以是垂直方向的，
flex-direction : row设置主轴main为水平方向
flex-direction : column设置主轴main为垂直方向，交叉轴则总是与主轴相反
大多数情况，我们通常设置主轴为水平，交叉轴为垂直
3.container和item上的相关属性
-
应用在flex container上的css属性
- flex-direction ：设置主轴方向为水平/垂直
- row
- row-reverse
- column
- column-reverse
- justify-content ：设置item在主轴main上的对齐方式
- flex-start
- flex-center
- flex-end
- space-between
- space-evently
- space-around
- aligh-items ：设置item在交叉轴cross上的对齐方式
- stretch
- baseline
- flex-start
- center
- flex-end
- flex-wrap ：设置items的多行显示
- nowrap
- wrap
- wrap-reverse
- flex-flow ：flex-wrap和flex-direction的组合缩写属性
- flex-direction || flex-wrap
- align-content ：设置行与行之间在交叉上的对齐方式，只用在多行显示
- stretch(默认)
- flex-start
- flex-center
- flex-end
- space-between
- space-evently
- space-around
- flex-direction ：设置主轴方向为水平/垂直
-
应用在子元素flex item上的css属性
- order ：决定item的排列顺序
- align-self ：决定单个item在交叉轴的对齐方式，会覆盖align-items
- flex-grow ：决定item的扩展规律
- flex-shrink ：决定item的收缩规律
- flex-basis ：设置item在主轴上的大小，优先级顺序 max/min-width/height > flex-basis > width/height > 内容本身大小
- flex ：复合属性 flex-grow || flex-shrink || flex-basis
以上这些属性有些是可以作为组合属性，虽然属性很多但是在实际开发中一般不会全部使用。只需要挑几个需要的或者使用频率高的属性即可
