---
# System prepended metadata

title: container 外層屬性
tags: [css]

---

---
tags: css
---
# container 外層屬性

* flex 起手式就是下在層屬性，這樣就會讓容器中的div排成一列

> HTML 架構

```htmlembedded=
<div class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item">3</div>
</div>
```

> flex 寫在container最外層的div中

```css=
.container{
  width: 500px;
  background:#456;
  margin: 0 auto;
   /*  flex 寫法    */
  display: flex;
}

```

* flex 內容會根據最高的div來做排列，例如我們只下了item2的一個高度，其他的item也會依照item2去做排列。
```css=
.item{
  background: #00ffa2;
  width: 100px;
  font-size: 30px;
  text-align: center;
  margin: 10px;
}

.item2 {
  height: 100px;
}
```
![](https://i.imgur.com/eawAeg3.png)
* flex 內容寬也會做自適應的排列、會依照父元素的寬去做等比例縮放

![](https://i.imgur.com/J5aUV9D.png)
