0%

CSS Flex

1

1. 外層屬性

Flex 要加在父層上面,舉例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container{
background-color:#004466;
padding:10px;
display:flex;
width: 500px;
}
.item{
background-color: #00ffa2;
width: 100px;
font-size:32px;
margin:10px;
text-align:center;
}

<div class="container">
<div class="item">1</div>
<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere ipsam accusantium totam maxime dolore est ad doloremque a labore? Aliquid non consequatur nesciunt atque voluptas ea magni natus dolores cum?</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

以此為例要把display:flex 寫在container 上

如果container 有指定500px;

那子元素的width 超過這個大小會怎麼樣? 比如200px

某個子元小變高了,預設會一起等高

2

區塊元素特性

3

Flex 特性

4

2. flex-direction

  • row(default)

  • row-reverse

  • column

  • column-reverse

    5

3. justify-content

  • flex-start

  • flex-end

  • center

  • space-around

  • space-between

    space-evenly

    6

4. align-items

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

7