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

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

> HTML 架構

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

> flex 寫在container最外層的div中

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

* flex 內容會根據最高的div來做排列，例如我們只下了item2的一個高度，其他的item也會依照item2去做排列。

.item{
  background: #00ffa2;
  width: 100px;
  font-size: 30px;
  text-align: center;
  margin: 10px;
}

.item2 {
  height: 100px;
}

* flex 內容寬也會做自適應的排列、會依照父元素的寬去做等比例縮放