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

flex布局教程(上篇)

发布于 2018-09-18 阅读 129 次 CSS flex布局 代码片段

flex布局是css3关于layout的重点内容,有的flex垂直居中可以轻松实现,布局更加得心应手

使劲戳例子一目了然:flexdemo
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

定义一个flexbox

预览:flexdemo

.flex{
    display:flex;
}

flex布局的各种属性

预览:flexdemo
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