几种常见布局的flex写法

flex布局目前基本上兼容主流的浏览器,且实现方式简单。小H整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法


​flex基础知识点

flex-grow和flex-shrink相关计算公式

  • 公式1:子元素空间 < 父容器

父容器剩余空间 = 父容器宽度 - 子元素宽度之和
增长单位 = 父容器剩余空间 / 各子元素flex-grow之和
子元素实际宽度 = (flex-basis) + 增长单位*(flex-grow)

  • 公式2:子元素空间 > 父容器

子元素溢出的宽度 = 子元素的宽度之和 - 子元素宽度之和
收缩单位 = 子元素溢出的宽度 / 各子元素flex_shrink之和
计算的子元素的宽度 = (flex-basis) - 收缩单位*(flex-shrink)

flex兼容性

几种常见布局的flex写法_第1张图片

目前flex兼容主流浏览器,对于部分兼容的浏览器可加私有属性:

display:-ms-flex;/* IE10 */
display:-moz-flex;/* Firefox2 ~ Firefox21 */
display:-webkit-flex;

flex bugs

  • 在IE10~11浏览器,min-height不适合于flex容器的子元素flex项目。如果可能的话,使用height来替代min-height。
  • 在Chrome,Opear和Safari浏览器不识别flex项目内容的最小尺寸。可以设置flex-shrink的值为0(而不是默认的1),以避免不必要的收缩。
  • 不使用无单位的flex-basis值,因为在IE10~11中,flex简写被忽略。常使用0%来替代0px。

flex布局应用场景

Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局,而Grid布局更适合用于一些大规模的布局。

flex布局优缺点

  • 兼容所有主流浏览器
  • 轻松实现元素的水平垂直居中
  • 可以忽略内联元素的4px外边距
  • 可以简单的实现复杂的布局

推荐阅读

  • 大漠:《一个完整的Flexbox指南》
  • 阮一峰:《Flex 布局教程》
  • Philip Walton和Greg Whitworth收集和整理了有关于Flexbox bugs。

几种常见布局的flex写法

首先要对父元素设置flex布局方式,同时在本案例中,利用媒体查询,当屏幕分辨率小于768px的时候,flex布局变成纵向排列。

几种常见布局的flex写法_第2张图片
  • 两列布局
    flex-grow定义的是元素的放大比例,默认值为0,表示元素不放大。当给所有子元素赋予flex-grow的值时,该值可以看作是元素尺寸所占父元素的比例。
几种常见布局的flex写法_第3张图片
几种常见布局的flex写法_第4张图片
  • 两列布局定宽
    flex是flex-grow flex-shrink flex-basis的简写方式。
    给第一个子元素赋值flex:1 0 100px;表示该元素在任何情况下的宽度均是固定位100px,不会随着父元素和其他子元素缩放。
    第二个子元素的flex-grow为1,则在任何情况下该元素均占满父元素的剩余空间,设置overflow可以防止元素溢出。
几种常见布局的flex写法_第5张图片
几种常见布局的flex写法_第6张图片
  • 三列布局
    该布局中重点介绍的是order属性,元素的先后排列顺序与order的值对应,order值越大,元素越靠后。
几种常见布局的flex写法_第7张图片
几种常见布局的flex写法_第8张图片
几种常见布局的flex写法_第9张图片
  • n列等比布局
    注意到第6个子元素的特殊性,我们希望这六个子元素能等宽分布,但是当元素内容过多时,它会占用更多的空间,甚至溢出。
    因此对这些元素定义了width:100%;该方法表示所有的元素均占用父元素应有的位置,不因其他兄弟元素内容过多而少分配空间。
几种常见布局的flex写法_第10张图片
几种常见布局的flex写法_第11张图片
  • 流式布局
    流式布局可适用于自适应布局中,当父元素大小发生改变时,其子元素的大小也随之改变。
    该布局的重点属性是flex-wrap:wrap;,如此设置可以使子元素自动换行,防止子元素溢出。
几种常见布局的flex写法_第12张图片
几种常见布局的flex写法_第13张图片
  • 水平垂直居中
    关键属性为justify-content:center;align-item:center;这是flex布局的一个两点,不需要知道父、子元素任何相关的尺寸信息,便能实现居中布局,灵活性很大。
几种常见布局的flex写法_第14张图片
  • 对折线
    该案例以及下面的“各种对齐方法”主要是介绍flex中,水平和垂直方向上的的各种对齐方式。
几种常见布局的flex写法_第15张图片
几种常见布局的flex写法_第16张图片
几种常见布局的flex写法_第17张图片
  • 各类对齐方式



    几种常见布局的flex写法_第18张图片

    几种常见布局的flex写法_第19张图片
    pic26.png

你可能感兴趣的:(几种常见布局的flex写法)