<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.aa{
width: 600px;
height: 200px;
border-style: solid;
background-color: salmon;
display: flex;
/* 容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。 */
/* flex-direction属性：决定主轴的方向（即项目的排列方向） */
/* flex-direction: row; 主轴水平方向，起点在左端；*/
/* flex-direction: row-reverse; 主轴水平方向，起点在右端； */
/* flex-direction: column; 主轴垂直方向，起点在上边沿；*/
/* flex-direction: column-reverse 主轴垂直方向，起点在下边沿; */
/* flex-wrap属性：定义换行情况 */
/* flex-wrap: nowrap; nowrap（默认）：不换行； */
/* flex-wrap: wrap; wrap：换行，第一行在上方； */
/* flex-wrap: wrap-reverse; wrap-reverse：换行，第一行在下方。 */
/* flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap */
/* flex-flow: row-reverse wrap; 主轴在水面方向，起点在右端； 换行第一行在上方 */
/* justify-content属性：定义项目在主轴上的对齐方式。 */
/* justify-content: flex-start; flex-start（默认值）：左对齐； */
/* justify-content: flex-end; flex-end：右对齐； */
/* justify-content: center; center：居中； */
/* justify-content: space-between; space-between：两端对齐，项目之间间隔相等； */
/* justify-content: space-around; space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。 */
/* justify-content: space-evenly; space-evenly: 每个项目两侧和项目之间的间隔相等 */
/* align-items属性：定义在交叉轴上的对齐方式 */
/* align-items: flex-start; flex-start：起点对齐； */
/* align-items: flex-end; flex-end：终点对齐； */
/* align-items: center; center：中点对齐； */
/* align-items: baseline; baseline：项目的第一行文字的基线对齐； */
/* align-items: stretch; stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
/* align-content属性：定义多根轴线的对齐方式
如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···； */
/* flex-wrap: wrap; */
/* align-content: flex-start; flex-start：与交叉轴的起点对齐； */
/* align-content: flex-end; flex-end：与交叉轴的终点对齐；; */
/* align-content: center; center：与交叉轴的中点对齐； */
/* align-content: space-between; space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布； */
/* align-content: space-around; space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍； */
/* align-content: stretch; stretch（默认值）：如果项目未设置高度或设为auto，轴线占满整个交叉轴 */
}
/* 项目的属性
设置在项目上的属性也有6个。
order
flex-grow
flex-shrink
flex-basis
flex
align-self */
.bb1, .bb2, .bb3{
width: 100px;
border-style: solid;
/* 项目的属性 */
/* order: 3; order属性：定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负值。 */
/* flex-grow: 1; flex-grow属性：定义项目的放大比例默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。
若果有一个项目flex-grow为2，其余都为1，则该项目占据剩余空间是其余的2倍 */
/* flex-shrink: 0 flex-shrink属性：定义项目的缩小比例;默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。 */
/* flex-basis:300px; lex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。默认值为auto，浏览器根据此属性检查主轴是否有多余空间。
注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。 */
/* flex属性是flex-grow，flex-shrink和flex-basis的简写 */
}
</style>
</head>
<body>
<div class="aa">
<div class="bb1">1</div>
<div class="bb2">2</div>
<div class="bb3">3</div>
</div>
</body>
</html>
Display：flex 布局
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- display flex容器的属性 1. flex-direction 2. flex-wrap 3. ...
- display flex是什么？ 微信小程序最近火的不要不要的，下载开发工具测试了一下，小程序对css支持很好， ...
- 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那...
- 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活...
