当前位置:首页 > flex布局教程(上篇)

flex布局教程(上篇)

发布于 2018-09-18 阅读 518 次 CSS flex布局 代码片段
flex布局是css3关于layout的重点内容,有的flex垂直居中可以轻松实现,布局更加得心应手 `使劲戳例子一目了然:`[flexdemo](https://www.w2le.com/demo/flex.html "刮刮卡") 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 #####定义一个flexbox `预览:`[flexdemo](https://www.w2le.com/demo/flex.html "刮刮卡") ```css .flex{ display:flex; } ``` ####flex布局的各种属性 `预览:`[flexdemo](https://www.w2le.com/demo/flex.html "刮刮卡") **flex-direction: [row(默认) | row-reverse | column | column-reverse]** **flex-wrap:[nowrap(默认) | wrap | wrap-reverse]** **flex-flow 是flex-direction 和 flex-wrap的简写形式,例如:flex-flow:column nowrap** **justify-content 主轴方向对齐方式** - flex-start(默认值):左对齐 - flex-end:右对齐 - center: 居中 - space-between:两端对齐,项目之间的间隔都相等。 - space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 **align-items: flex-start | flex-end | center | baseline | stretch;** - flex-start:交叉轴的起点对齐。 - flex-end:交叉轴的终点对齐。 - center:交叉轴的中点对齐。 - baseline: 项目的第一行文字的基线对齐。 - stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 `预览:`[flexdemo](https://www.w2le.com/demo/flex.html "刮刮卡")