弹性盒子: 上下左右居中、换行、栅格布局
零、
父元素为display: flex;孙元素不受影响:所以想让子元素不受父元素影响,在子元素上套一层,让子元素变成孙元素
一、容器的属性(6)
display、 flex-direction、 flex-wrap、 justify-content、 align-items、 align-content
❶ display: inline-flex / flex;
(Webkit内核的浏览器,必须加上-webkit前缀。)
❷ flex-direction: row | row-reverse | column | column-reverse;(主轴左右还是上下,左始还是右始)
❸ flex-wrap: nowrap | wrap | wrap-reverse;(项目换行)
❹flex-flow: <flex-direction> || <flex-wrap>;(❷ 和 ❸的合体)
❺ justify-content: flex-start | flex-end | center | space-between | space-around;(主轴对齐方式)
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
❻ align-items: flex-start | flex-end | center | baseline | stretch;(交叉轴对齐方式)
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
❼ align-content: flex-start | flex-end | center | space-between | space-around | stretch;(基于主轴 并且交叉轴的设置)
display: flex; justify-content: center; align-items: center; 100%; /* 为什么加 100%;才能上下左右居中 */ /* 会让子元素上下左右居中*/
二、项目的属性(6、儿子的属性)
① order: <integer>; (/* default 0 */ 插队排序 -- 类z-index)
② flex-grow /* default 0 */
③ flex-shrink /* default 1 */
④ flex-basis
⑤ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ](② ③ ④简写)
⑥ align-self
三、
Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item)
主轴
交叉轴
main start
main end
cross start
cross end
main size(宽)
cross size(高)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex</title> <style> .flex{ display: flex; auto; height: 200px; background: #ccc; } .inlineFlex{ display: inline-flex; auto; height: 200px; border: 1px solid #000; margin-top: 20px; } section{ /* margin-left: 10px; */ /* 200px; */ flex-grow: 1; } .f1{ order: 9; } .f2{ flex-grow: 2; } .f3{ } .f4{ order: -2; } .f5{ } .f6{ } </style> </head> <body> <div class="flex"> <section class="f1">1</section> <section class="f2">2</section> <section class="f3">3</section> <section class="f4">4</section> <section class="f5">5</section> </div> <div class="inlineFlex"> <article>01</article> <article>02</article> <article>03</article> <article>04</article> <article>05</article> <article>06</article> <article>07</article> </div> <div class="inlineFlex"></div> </body> </html>
父元素平分三个子元素
flex-wrap父
子flex: 0 0 33.3%; / 0 0 100px%;
http://www.runoob.com/w3cnote/flex-grammar.html ->
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html