HTML ????: ??? ?? ?? ????? ?? Flexbox? ???? ??, ?? ?? ??? ?????.

??:
? ??? ? ???? ??? ?? ?? ????? ???? ?? ???? ?? ?????. ???? CSS ???? ??? ??? ?? ????? ??? ? ?? ???? ????? Flexbox ????? ???? ??? ???? ?????. ? ????? Flexbox ????? ?? ??? ???? ???? ???? ??? Flexbox? ???? ??? ?? ?? ????? ???? ??? ??? ?? ? ??? ???? ?? ??? ?????.

1. Flexbox ???? ??
Flexbox ????(??? ?? ????)? ?? ???? ??? ?? ???? ??? ???? ?? ??? ?? CSS3? ??? ??? ???? ?????. ??? ??? ?? ??? ??? ?? ??? ? ??? ?? ???? ??? ?? ??? ?????. Flexbox ????? ?? ?? ?? ?? ?? ????? ?? ??? ???? ????? ?????.

2. Flexbox ????? ?? ??
1. ????: flex ?? inline-flex? ??? ?? ??? ???? ??? Flex ?????? ???.
2. ??: ???? ?? ? ?? ??? Flex ????? ?????.
3. ??: ???? ? Flex ????? ????, ????? ?? ?????.
4. ?? ?: ??? ??? ? ?? ????.

3. Flexbox ????? ???? ??
1. ??? ?? ?? ???? ??
??? ?? ?? ????? ? ??? ??? ?? ???? ?? ??? ??? ?? ?? ??? ???? ?????. ? ??? Flexbox ????? ???? ?? ?? ? ????. ????? flex-direction ??? ?? ???? flex ??? ?? ??? ????? ?? ???. ???? ?? ?? ??? ????.

<div class="container">
  <div class="item">項(xiàng)目1</div>
  <div class="item">項(xiàng)目2</div>
  <div class="item">項(xiàng)目3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1;
}

2. ?? ?? ?? ??? ??
Flexbox ????? ???? ?? ?? ?? ???? ?? ??? ? ????. ????? align-items ??? ???? ?? ?? ??? ????? justify-content ??? ???? ?? ?? ??? ??? ? ????. ???? ?? ??? ??? ????.

<div class="container">
  <div class="item">項(xiàng)目1</div>
  <div class="item">項(xiàng)目2</div>
  <div class="item">項(xiàng)目3</div>
</div>

.container {
  display: flex;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}

.item {
  width: 200px;
  height: 100px;
}

3. ?? ??? ?? ??? ?? ???? ??
Flexbox ????? ???? ?? ??? ?? ??? ?? ????? ?? ??? ? ????. ?? ?? ??? ?? ?? ?? ??? ??? ? ??, ?? ?? ??? ???? ??? ? ????. ???? ?? ??? ??? ????.

<div class="container">
  <div class="item fixed-width">固定寬度</div>
  <div class="item">自適應(yīng)寬度</div>
  <div class="item">自適應(yīng)寬度</div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

.fixed-width {
  width: 200px;
}

4. ??
Flexbox ????? ?? CSS ???? ??? ?? ???? ???? ???? ??? ???? ?????. ? ????? Flexbox ????? ?? ??? ???? ???? ???? ??? Flexbox? ???? ??? ?? ?? ????? ???? ??? ??? ???? ???? ? ??? ?? ?? ?? ??? ?????. ? ??? ? ??? ? ???? ??? ????? ??? ? ???? ??? ??? ????.

? ??? HTML ????: ??? ?? ?? ????? ?? Flexbox? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!