弹性盒子
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
/*display: -webkit-flex;*/
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
flex-direction: 指定了弹性子元素在父容器中的排列
- row:横向从左到右排列(默认)。
- row-reverse:反转横向排列
- column:纵向排列
- column-reverse:反转纵向排列
justify-content: 内容对齐(应用在弹性容器上)
- flex-start:弹性项目向行头紧挨着填充(默认)。
- flex-end:弹性项目向行尾紧挨着填充。
- center:弹性项目居中紧挨着填充。
- space-between:弹性项目平均分布在该行上。
- space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间。
align-items: 设置子元素在侧轴(纵轴)方向上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap: 指定子元素换行方式
- nowrap: 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
多媒体查询
@media not|only mediatype and (expressions) {
CSS 代码...;
}