几种常见布局的flex写法

fish 发布于2019-08-01 17:08 / 916人阅读

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。

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

flex基础知识点 flex-grow和flex-shrink相关计算公式

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

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

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

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

flex兼容性

目前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-grow定义的是元素的放大比例，默认值为0，表示元素不放大。当给所有子元素赋予flex-grow的值时，该值可以看作是元素尺寸所占父元素的比例。

两列布局定宽
flex是flex-grow flex-shrink flex-basis的简写方式。

给第一个子元素赋值flex：1 0 100px;表示该元素在任何情况下的宽度均是固定位100px，不会随着父元素和其他子元素缩放。
第二个子元素的flex-grow为1，则在任何情况下该元素均占满父元素的剩余空间，设置overflow可以防止元素溢出。

三列布局
该布局中重点介绍的是order属性，元素的先后排列顺序与order的值对应，order值越大，元素越靠后。

n列等比布局
注意到第6个子元素的特殊性，我们希望这六个子元素能等宽分布，但是当元素内容过多时，它会占用更多的空间，甚至溢出。

因此对这些元素定义了width:100%;该方法表示所有的元素均占用父元素应有的位置，不因其他兄弟元素内容过多而少分配空间。

流式布局
流式布局可适用于自适应布局中，当父元素大小发生改变时，其子元素的大小也随之改变。

该布局的重点属性是flex-wrap:wrap;，如此设置可以使子元素自动换行，防止子元素溢出。

水平垂直居中
关键属性为justify-content:center;align-item:center;这是flex布局的一个两点，不需要知道父、子元素任何相关的尺寸信息，便能实现居中布局，灵活性很大。

对折线
该案例以及下面的“各种对齐方法”主要是介绍flex中，水平和垂直方向上的的各种对齐方式。

各类对齐方式

云服务器 GPU云服务器 flex布局 sql的写法 php的链式写法 python并的写法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50968.html

结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

2json 2019-08-23 16:58 评论0 收藏0
前端基础汇总

摘要：及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性，根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

laznrbfe 2019-08-29 18:38 评论0 收藏0
Flex 布局常见的几种方式

摘要：之前的布局方式正常流或叫文档流负布局特点块级元素侧重垂直方向行内布局侧重水平方向，布局是与方向无关的。 flex 之前的布局方式 normal flow（正常流或叫文档流） float + clear position relative + absolute display inline-block 负margin flex 布局特点块级元素侧重垂直方向、行内布局侧...

April 2019-08-29 15:19 评论0 收藏0