拥抱Flexbox弹性布局基本概念之Flex容器

2019-05-29271次阅读flexbox

Flexbox是CSS3中为了现代网络中更为复杂的网页需求而设计。因此它也是现代Web布局中的主流方式之一,成为一个新的W3C标准规范。极力推荐阅读英文版

 

Flexbox可以做什么

长期以来使用表格、浮动、清除浮动、行内块元素和其他CSS属性来布局网站内容。当制作一些复杂的页面时就比较吃力,不得不使用css Hack、css黑魔法来实现,例如水平垂直居中,等高布局等。Flexbox的目的就是改变这一切,最起码可以让你告别浮动、清除浮动。。。让布局更简单更智能。Flexbox可以这样操作它的子元素布局:

  • 如果元素容器没有足够的空间,无需计算每个子元素的宽度,就可以设置它们在同一行上
  • 可以快速让它们布局在一行一列上
  • 可以方便让它们对齐容器的左、中、右等;
  • 无需修改结构就可以改变他们的显示顺序
  • 如果元素容器设置百分比和视窗大小改变,不用担心未指定子元素的宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例即拥有弹性

 

Flexbox版本

主要区别是2009年到2012年之间的语法变化。

  • 2009年7月 工作草案 (display: box;)
  • 2011年3月 工作草案 (display: flexbox;)
  • 2012年9月 候选推荐 (display: flex;)

 

Flexbox浏览器支持情况

是不是很兴奋,上图可以看出移动端可以放心使用,注:IE10是2011年3月工作草案。

 

Flexbox的术语

在介绍Flexbox术语之前有必要先了解一下何为主轴(Main Axis)与侧轴(Cross Axis),这也是新手上路中往往疑惑的一个点。完全理解Flexbox主轴方向(Main Direction)和侧轴(Cross Axis)方向也是玩转Flexbox布局的起手式。

Flex容器(Flex Container)中flex-direction属性决定了Flex容器(Flex Container)的主轴(Main Axis)、主轴方向(Main Direction)和侧轴(Cross Axis)、侧轴方向(Cross Direction)。

  • Flex容器(flex container):通过设置元素的display属性为flex或inline-flex可以得到一个Flex容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。
  • Flex项目(flex items)Flex容器的子元素也包括Flex容器内的文本
  • 主轴(Main Axis)、主轴方向(Main Direction):flex项沿着主轴排布,注意主轴不一定是水平的,主轴是水平还是垂直取决于flex-direction属性(见上方的主轴与侧轴说明)。
  • 主轴起点( Main Start)、主轴终点(Main End):分别表示主轴的开始位置和结束位置,flex项在容器中会从main-start到main-end排列。
  • 主轴长度(Main size):flex项占据主轴的宽度或高度。flex项的main size属性是要么是“宽度”,要么是“高度”,这取决于主轴方向(见上方的主轴与侧轴说明)。
  • 侧轴(Cross Axis)、侧轴方向(Cross Direction):垂直于主轴的轴线称为侧轴,其方向取决于主轴方向(见上方的主轴与侧轴说明)。
  • 侧轴起点(cross-start)、侧轴终点(cross-end):Flex项目从Flex容器的侧轴起点边开始排列至侧轴终点边结束位置。
  • 侧轴长度(Cross size)、侧轴长度属性:flex项占据侧轴的宽度或高度。flex项的cross size属性是要么是“宽度”,要么是“高度”,这取决于侧轴方向(见上方的主轴与侧轴说明)。

图片来源自W3C,上图只是flex-direction:row情况下的说明

 

开始使用Flexbox

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>
ul{
    list-style-type:none;
    border:1px solid #f00;
    display:flex;/*声明为flex容器*/
}

li{
    width:100px;
    height:100px;
    background-color:#f60;
    margin:8px;
}

UL显式的设置display:flex或者display:inline-flex后就变成了Flex容器,此时一个Flexbox格式化上下文(Flexbox formatting context)就形成了。UL的子元素LI就变成了Flex项目。

 

Flex容器(Flex Container)的属性

flex-direction

flex-direction属性决定了Flex容器(Flex Container)的主轴(Main Axis)、主轴方向(Main Direction)和侧轴(Cross Axis)、侧轴方向(Cross Direction),控制Flex项目沿着主轴方向(Main Axis)的排列。

它具有四个值:

  • rowFlex项目将沿着主轴(Main Axis)从左向右排列。

  • row-reverse:Flex项目将沿着主轴(Main Axis)从右向左排列。

  • column:Flex项目将沿着主轴(Main Axis)从上向下排列。

  • column-reverse:Flex项目将沿着主轴(Main Axis)由下向上排列。

默认值row

flex-wrap

flex-wrap属性主要用来控制Flex项目根据Flex容器的主轴方向来显行单行还是多行或者是单列还是多列。

它具有三个值:

  • nowrap:Flex项目在Flex容器主轴方向单行或单列显示。

  • wrap:Flex项目在Flex容器主轴方向多行或多列显示。

  • wrap-reverse:Flex项目在Flex容器主轴方向多行或多列反向显示。

默认值nowrap

flex-flow

flex-flow是flex-direction和flex-wrap两个属性的简写。

ul{
   flex-flow: row wrap;
}

相当于:

ul{
    flex-direction: row;
    flex-wrap: wrap;
}

justify-content

justify-content属性主要定义了Flex项目在主轴(Main-Axis)上的对齐方式。

它具有六个值:

  • flex-start:所有Flex项目靠主轴(Main-Axis)开始边缘。

  • flex-end:所有Flex项目靠主轴(Main-Axis)结束边缘。

  • center:所有Flex项目排在主轴(Main-Axis)中间。

  • space-between:让除了第一个和最一个Flex项目的两者间间距相同。

  • space-around:让每个Flex项目具有相同的空间,和space-between有点不同,第一个Flex项目和最后一个Flex项目距Main-Axis开始边缘和结束边缘的的间距是其他相邻Flex项目间距的一半。

  • space-evenly:任何两个Flex项目之间的间距(以及到Flex容器边缘的空间)相等。(注:该属性以前很少看到,原因是以前浏览器不支持,chrome 也是60版本之后才支持。延伸一下,align-content:space-evenly也是这个逻辑

默认值: flex-start

align-items

align-items主要用来控制Flex项目在侧轴(Cross-Axis)上的对齐方式。

它具有五个值:

  • stretch: 拉伸Flex项目以填充整个容器(这里特别要注意:如果Flex项目有尺寸属性(min-width / max-width / width / min-height / max-height / height),那么首先应用这些尺寸属性。如上面的示例图之所以可以拉伸,说明Flex项目没有应用尺寸属性)。

  • flex-start/baseline:让所有Flex项目靠侧轴(Cross-Axis)开始边缘。

  • flex-end:让所有Flex项目靠侧轴(Cross-Axis)结束边缘。

  • center:让Flex项目在侧轴(Cross-Axis)中间。

默认值:stretch

align-content

align-content属性用于Flex容器内多行或多列的Flex项目在侧轴方向对齐方式。(见上方的主轴与侧轴说明)

它具有四个值:

  • flex-start:多行在容器的开始位置排布
  • flex-end:多行在容器的结束位置排布
  • center:多行在容器的总结位置排布
  • space-between:多行均匀分布;第一行分布在容器的开始位置,最后一行分布在容器的结束位置
  • space-around:多行均匀分布,并且每行的间距(包括离容器边缘的间距)相同;
  • strech(默认值):多行拉伸以填充满整个剩余空间
  • space-evenly:任何两个Flex项目之间的间距(以及到Flex容器边缘的空间)相等。(注:该属性以前很少看到,原因是以前浏览器不支持,chrome 也是60版本之后才支持。延伸一下,justify-content:space-evenly也是这个逻辑

 

Flexbox小结

Flex容器所有属性如下:

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

所谓Flex容器属性都是和display:flex或display:inline-flex一样写在父元素上的,下一篇将介绍写在子元素上的Flex项目属性。

注: Flexbox布局最适合应用程序的组件和小规模布局,而Gird布局则适用于较大规模的布局。

上一篇: 单行居中多行居左最多两行超过用省略号  下一篇: css多列等高布局  

拥抱Flexbox弹性布局基本概念之Flex容器相关文章