- Objective:
- Breadcrumb:
# 概念阐释
- 可以让**单个维度（行或列）** 产生自适应
- 使用`flexbox`必须要有**父级**元素（它像一个容器）`class="flex-container"`和**内嵌**元素`class="item"`
- CSS中对应`container`选择器中使用`display`属性
- 使用flex后，盒子的宽和高由内容长短决定，所以要定义
- 块级元素与内联元素都是一样的效果
```html
<div class="flex-container">
<div class="item">1<div>
<div class="item">2<div>
<div class="item">3<div>
</div>
```
```css
.flex-container {
display:flex;
}
.item{} /*正常的css样式*/
```
# 实例
**1.** 复写样式并尝试拖动浏览器改变大小：[Create a Flex Container](https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap8)
**2.** 用flex改写森特奈说明书底部信息导航
```html
<head>
<style>
.flex-container{
display: flex;
border:1px dashed green;
}
.item{
border:1px solid red;
width:100px;/*盒子的最大宽度*/
/* height:100px; 定义的是div.item盒子的高度 */
font-size: 30px;
text-align: center;
line-height: 75px;/*定义的是内容1的行高*/
margin:10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
<div class="item">4</div>
</div>
</body>
```
# 相关内容
## 对比于grid layout
- flexbox只能改变一行内每个内嵌元素的宽度，而不能改变内嵌元素数量，但grid layout可以改变数量，比如在中屏下显示2个，在大屏下显示4个。
```html
<div class="row">
<div class="col-lg-3 col-md-6"><p>Item 1</p></div>
<div class="col-lg-3 col-md-6"><p>Item 2</p></div>
<div class="col-lg-3 col-md-6"><p>Item 3</p></div>
<div class="col-lg-3 col-md-6"><p>Item 4</p></div>
<div class="col-lg-3 col-md-6"><p>Item 5</p></div>
<div class="col-lg-3 col-md-6"><p>Item 6</p></div>
<div class="col-lg-3 col-md-6"><p>Item 7</p></div>
<div class="col-lg-3 col-md-6"><p>Item 8</p></div>
</div>
```
# 参考资料
- [w3c](https://www.w3schools.com/css/css3_flexbox.asp)