Flex 布局(一维)
flex: 弹性盒布局
Flex 术语
- flex 容器:
display: flex / inline-flex - flex 项目: flex 容器的子元素(仅限子元素,可嵌套)
- flex 主轴: 项目排列参考线
- flex 交叉轴: 与主轴垂直的参考线
主轴,交叉轴不可见, 仅供布局参考
Flex 属性
(一) 容器属性
display: 容器类型(块或行内)flex-flow: 主轴方向与是否换行place-content: 项目在”主轴”上的排列方式place-items: 项目在”交叉轴”上的排列方式
(二) 项目属性
flex: 项目在”主轴”上的缩放比例与宽度place-self某项目在”交叉轴”上的排列方式order: 项目在”主轴”上的排列顺序
更多: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
示例代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>flex属性简介</title></head><body><div class="container"><div class="item">item1</div><div class="item">item2</div><div class="item">item3</div></div><style>/* flex容器 */.container {width: 450px;height: 50px;/* flex: 行内块 */display: flex;/* 1. 默认状态 *//* 主轴方向 *//* flex-direction: row; *//* 是否换行 *//* flex-wrap: nowrap; *//* 主轴排列 *//* justify-content: start; *//* 单行(不换行) */align-items: stretch;/* 多行(换行) */align-content: start;/* ---------------------------- *//* flex-flow: flex-direction flex-wrap; */flex-flow: row nowrap;/* 为了与grid统一记忆,使用`place-`为前缀的属性替换原来flex- *//* justify-content -> place-content 替换; */place-content: start;/* ( align-items, align-content ) -> place-items 替换; */place-items: stretch;/* 将 5 个 容器属性 , 减少到 3 个 *//* ---------------------------- *//* 3. 自定义属性值 *//* (1) flex-flow:主轴方向, 多行容器 *//* flex-flow: row nowrap;flex-flow: column nowrap;flex-flow: column wrap; *//* (2) place-content: 主轴排列与"对齐"(通过分配剩余空间实现) */place-content: start;/* 居右 */place-content: end;/* 居中 */place-content: center;/* 二端对齐 */place-content: space-between;/* 分散对齐 */place-content: space-around;/* 平均对齐 */place-content: space-evenly;/* (3) place-items: 交叉轴排列 */place-items: stretch;/* place-items: start;place-items: end;place-items: center; *//* 因为是单行容器,所以不涉及对齐方式 */}/* flex项目 */.container > .item {/* width: 100px; */background-color: lightgreen;/* 项目属性 *//* (1) flex : 项目缩放比例与宽度 *//* flex: flex-grow flex-shrink flex-basis *//* flex: 放大比例 缩小比例 计算宽度 *//* 1. 默认状态(部分响应): 不放大,允许缩小,宽高自动 */flex: 0 1 auto;flex: initial;/* 2. 完全响应: 允许放大,允许缩小,宽高自动 */flex: 1 1 auto;flex: auto;/* 3. 完全不响应: 禁止放大,禁止缩小,宽高自动 */flex: 0 0 auto;/* flex: 0 0 200px; *//* min-width > flex-basis > width *//* min-width: 250px; */flex: none;/* 常用缩写 */flex: 1;/* 完整 *//* flex: 1 1 auto;flex: auto; *//* flex: 1; *//* flex: 2; *//* flex: 9; */}/* 例如, 有一个三列布局, 中间一列的宽度,是二边的3倍 */.container .item:first-of-type,.container .item:last-of-type {flex: 1;background-color: yellow;}.container .item:first-of-type + * {background-color: wheat;flex: 3;/* 自定义某个项目在交叉轴上的排列 *//* place-self: start;place-self: end; */}/* 第一个 */.container .item:first-of-type {order: -1;background-color: violet;}/* 第二个 */.container .item:first-of-type + * {order: 1;}/* 第三个 */.container .item:last-of-type {order: 0;}</style></body></html>