CSS position 定位之 Flex

这篇博客是我学习Flex的一个笔记，学习的资源主要来自阮一峰老师博客。博客讲的很清楚，我自己总结之后,更方便理解。

一、Flex是什么

Flex是Flexible Box的缩写，意为“弹性盒子”

/*块内元素*/
display：flex;
/*行内元素*/
display:inline-flex;

二、基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction 决定主轴方向，
flex-wrap 定义如果一条轴线排不下，如何换行
flex-flow 前两个的简写
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 定义多根轴线的对齐方式，如果只有一根轴线，不起作用

四、项目属性

以下6个属性设置在项目上。

Order 项目的排列顺序
flex-grow 项目的放大比例
flex-shrink 项目的缩小比例
flex-basis 定义在分配多余空间之前，项目占据的主轴空间
Flex 前三个的缩写
align-self 允许单个项目有与其他项目不一样的对齐方式，覆盖align-items属性

五、实际问题

1. 不定宽高如何水平垂直居中？

2. 用flex布局制作航

3. 悬挂式布局

Flex:none;使用场景

推荐链接：flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？

4. 多列布局

5. 基本网格布局

HTML代码

<body><div class="body"><br><p>第一个布局</p><div class="box"><div class="box-cell">1/2</div><div class="box-cell">1/2</div></div><!-- <hr> --><br><p>第二个布局</p><div class="box"><div class="box-cell">1/3</div><div class="box-cell">1/3</div><div class="box-cell">1/3</div></div><br><p>第三个布局</p><div class="box"><div class="box-cell">1/4</div><div class="box-cell">1/4</div><div class="box-cell">1/4</div><div class="box-cell">1/4</div></div><br><p>第四个布局</p><div class="box"><div class="box-cell box-cell1">When in the Course of human events, ......</div><div class="box-cell box-cell1">We hold these truths to be self-evident......</div></div></div></body>

CSS代码

<head><meta charset="utf-8"><title></title><style type="text/css">.body {padding: 30px;height: 900px;border: 1px solid #333;}.box {/* border: 1px solid #333; */display: flex;/* height: 300px; */}.box-cell {margin: 10px;background-color: #D6D6D6;height: 30px;text-align: center;line-height: 30px;flex: 1;}.box-cell1 {height: auto;}</style></head>

示例

6. 圣杯布局