标签 flexbox 下的文章

Flexbox 布局


Flexbox 最适合是沿单个轴分布元素,那么是水平方向的,那么是垂直方向的。
Grid 它是二维的,也就是说水平和垂直方向都可以排列元素。

  • 一维布局,布局根据内容元素自适应:Flexbox
  • 二维布局,复杂非线性页面布局:Grid

拥抱自适应性

与浮动和其他传统布局不同的是,Flexbox 和 Grid 布局的出现是为了解决多设备出现的问题。

父元素和子元素

定义一个父容器:

.container{
    display: flex; /* 或者 display: inline-flex; */
}

容器里的子元素:

.item{
    order: {Int}; /* 设置排列顺序的权值 */
}

父容器的属性

flex-direction
  • row(默认值): 行排列,从左到右。
  • row-reverse: 反向,从右到左。
  • column: 列排列,从上到下。
  • column-reverse: 从下到上。
flex-wrap

一行或列不够放,多出的那一行/列要怎么放,用它 flex-wrap

  • nowrap(默认值): 单行显示。
  • wrap: 多行显示。
  • wrap-reverse: 多行显示。