Skip to content
黃芝晴的軟體工程師之路
黃芝晴 / Hedi Huang
想邀請你成為我踏上軟體工程師之路的貴人
解決問題的好習慣
關於我
More
Share
Explore
CSS

icon picker
css flexbox layout

⁠
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
⁠
⁠
⁠
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
⁠
⁠
⁠
https://codepen.io/justd/full/yydezN/
⁠
⁠
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

⁠
Untitled.png
⁠
⁠
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
⁠
Untitled 1.png
⁠
⁠
⁠
Untitled 2.png
⁠
⁠
⁠
Untitled 3.png
⁠
⁠
⁠
Untitled 4.png
⁠
⁠
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 300px;
}
⁠
Untitled 5.png
⁠
⁠

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;
}
⁠
Untitled 6.png
⁠
⁠

order

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.item-4 {
order: -1;
}

.item-2 {
order: 1;
}
⁠
Untitled 7.png
⁠
⁠

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;
}
⁠
Untitled 8.png
⁠
⁠

適用flexItem

flex-grow(增), flex-shrink(減)

.item {
flex-grow: 1;
}
/*全部item設定flex-grow: 1
會填滿item空間*/

.item-3 {
flex-grow: 3;
}
/*不會按照1:3的比例 但形成不同比例*/
⁠
Untitled 9.png
⁠
⁠
※注意※
若想要在不同個rule裡使用flex-grow
應使用flex shorthand的形式
@media (min-width: 769px) {
/*main-content*/
.row {
display: flex;
}

.col {
flex: 1;
}
}

@media (min-width: 1025px) {
.primary {
flex: 2;
}
}
⁠
m99gOViv6C.gif
⁠
⁠

flex-basis

.item {
flex-grow: 1;
flex-basis: 200px;
}
/*items在小於200px前 都會平均分配空間*/
⁠
MZs7dcuIeQ.gif
⁠
⁠

flex(shorthand: grow, basis, shrink)

.item {
flex: 1 200px;
}

.item-2 {
flex: 2;
}
/*此時item-2是沒有跟著均分的
更沒有flex-basis: 200px的特性
flex-basis的數字是多少都一樣*/
⁠
TuxuQWSoLs.gif
⁠
⁠

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模式*/
}
⁠
Untitled 10.png
⁠
⁠

單一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;
}
⁠
Untitled 11.png
⁠
⁠
.container {
display: flex;
min-height: 50vh;
}
.item {
margin: auto;
}

rwd application

nav

⁠
a0aMvVBq3I.gif
⁠
⁠
@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

⁠
1BHwJ3Rgd5.gif
⁠
⁠
@media (min-width: 769px) {
/*main-content*/
.row {
display: flex;
}

.col {
flex: 1 50%;
/*flex-basis: col的width除以2 => 兩格並排*/
}
}

@media (min-width: 1025px) {
/*main-content*/
.col {
flex-basis: 0;
/*讓flex-item不換行 並列*/
}

.secondary {
order: -1;
}
}

/*p.s.不知道為什麼在769px-1025px間
Welcome和Great Food的位置會對調?? */

content-including button

/*flex-container和flex-item是可以同步擔任的!*/
@media (min-width: 769px) {
/*.col作為flex-item*/
.col {
flex: 1 45%;
}
/*.col作為flex-container*/
.col {
display: flex;
/*預設為row 需改成column*/
flex-direction: column;
}

.button {
/*.button在底部對齊*/
margin-top: auto;
/*.button靠左*/
align-self: flex-start;
}
}

@media (min-width: 1025px) {
.col {
flex-basis: 0;
}
}

sticky-footer

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/*單一item設定flex: 1會讓此item填滿可以佔滿的空間*/
.row {
flex: 1;
}
⁠
sf2iw6UNNi.gif
⁠
⁠

適用flexContainer
flex-wrap(wrap-reverse)
align-content
justify-content(center, flex-start, flex-end, space-between, space-around)
order
align-items(stretch(default), flex-start, flex-end, center )
適用flexItem
flex-grow(增), flex-shrink(減)
flex-basis
flex(shorthand: grow, basis, shrink)
align-self
單一item置中 (3ways)
rwd application
nav
main-content
content-including button
sticky-footer
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.