弹性盒子的使用(flexbox)(父元素的使用)

传统的布局方法,都是使用盒子模型,使用浮动,定位,块状元素的使用,很不方便,很容易就会出现高度塌陷的问题,比如说垂直居中就很难实现。

我们先写框架

弹性盒子的使用(flexbox)(父元素的使用)

 弹性盒子的使用(flexbox)(父元素的使用)

这是目前的效果

弹性盒子的使用(flexbox)(父元素的使用)

 flex容器(父元素)

1 flex-direction--子项目的排列方式:

row初始值:

弹性盒子的使用(flexbox)(父元素的使用)

 row-reverse:

弹性盒子的使用(flexbox)(父元素的使用)

column:(剩下的值都在垂直下方)

弹性盒子的使用(flexbox)(父元素的使用)

 column-reverse值与column正相反

2 fles-wrap(子项目多行)

nowrap(初始值,给再多盒子也会在一行显示)

弹性盒子的使用(flexbox)(父元素的使用)

wrap(多余的盒子会转移下一行)

弹性盒子的使用(flexbox)(父元素的使用)

 wrap-reverse(从下到上)

弹性盒子的使用(flexbox)(父元素的使用)

 3 justify-content水平对齐

flex-start默认值左对齐

lex-end(右对齐)

center(中间对齐)

弹性盒子的使用(flexbox)(父元素的使用)

space-between

弹性盒子的使用(flexbox)(父元素的使用)

space-around 

弹性盒子的使用(flexbox)(父元素的使用)

4 align-items … (垂直对齐)

stretch(初期値)

flex-start(会在最上方)

flex-end(最下方)

弹性盒子的使用(flexbox)(父元素的使用)

center(中间)

弹性盒子的使用(flexbox)(父元素的使用)

 baseline(以文字的底部对齐)

5 align-content多行对齐(需要加flex-wrap:wrap )

stretch(初期値)

弹性盒子的使用(flexbox)(父元素的使用)

flex-start

弹性盒子的使用(flexbox)(父元素的使用)

flex-end 

 弹性盒子的使用(flexbox)(父元素的使用)

center

弹性盒子的使用(flexbox)(父元素的使用)

space-between

弹性盒子的使用(flexbox)(父元素的使用)

space-around

弹性盒子的使用(flexbox)(父元素的使用)

上一篇:Linux内核模块检查


下一篇:第七周总结