Skip to content
CSS
css flexbox layout
css flexbox layout
flexbox / flexitem / main axis / cross axis
適用flexContainer
flex-wrap(wrap-reverse)
※wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
.container { display: flex; flex-wrap: wrap; /*wrap代表direc: row可以多行 direc: column可以多列*/ flex-direction: row;}align-content
flex-flow: column-reverse wrap-reverse;justify-content: center;align-content: space-between;
.container { display: flex; flex-wrap: wrap; flex-direction: column; height: 300px;}
justify-content(center, flex-start, flex-end, space-between, space-around)
/*main-axis*/
.container { display: flex; flex-wrap: wrap; justify-content: space-around;}
.item-2 { margin-right: auto;}
order
.container { display: flex; flex-wrap: wrap; justify-content: center;}
.item-4 { order: -1;}
.item-2 { order: 1;}
align-items(stretch(default), flex-start, flex-end, center )
/*cross-axis*/
.container { display: flex; flex-wrap: wrap; height: 450px; align-items: center;}
.item { flex: 1;}
.item-2 { flex: 2;}
適用flexItem
flex-grow(增), flex-shrink(減)
.item { flex-grow: 1;}/*全部item設定flex-grow: 1會填滿item空間*/
.item-3 { flex-grow: 3;}/*不會按照1:3的比例 但形成不同比例*/
※注意※
若想要在不同個rule裡使用flex-grow
應使用flex shorthand的形式
@media (min-width: 769px) { /*main-content*/ .row { display: flex; }
.col { flex: 1; }}
@media (min-width: 1025px) { .primary { flex: 2; }}
flex-basis
.item { flex-grow: 1; flex-basis: 200px;}/*items在小於200px前 都會平均分配空間*/
flex(shorthand: grow, basis, shrink)
.item { flex: 1 200px;}
.item-2 { flex: 2;}/*此時item-2是沒有跟著均分的更沒有flex-basis: 200px的特性flex-basis的數字是多少都一樣*/
align-self
/*cross-axis*/.container { display: flex; flex-wrap: wrap; height: 450px; align-items: center; /*設定全體item的align模式*/}
.item { flex: 1;}
.item-2 { flex: 2; align-self: flex-start; /*設定個別的align模式*/}
單一item置中 (3ways)
.container { display: flex; min-height: 50vh; justify-content: center; align-items: center;}.container { display: flex; min-height: 50vh; justify-content: center;}.item { align-self: center;}
.container { display: flex; min-height: 50vh;}.item { margin: auto;}rwd application
nav
@media (min-width: 769px) { .main-header, .main-nav { display: flex; }
.main-header { flex-direction: column; align-items: center; }}
@media (min-width: 1025px) { .main-header { flex-direction: row; justify-content: space-between; }}main-content
@media (min-width: 769px) { /*main-content*/ .row { display: flex; }
.col { flex: 1 50%; /*flex-basis: col的width除以2 => 兩格並排*/ }}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.