flex布局

nemo 发布于2019-08-29 16:12 / 1153人阅读

摘要：基本概念布局元素称为容器，子元素称为项目容器存在两根轴主轴默认是水平方向和交叉轴默认是垂直方向任何一个容器都可以指定为布局块元素行内元素容器属性作用项目在主轴上的排列方向取值默认值作用容器空间不够时，是否允许项目换行取值默认值

1、基本概念
1）Flex布局元素称为Flex 容器，子元素称为Flex项目；
2）容器存在两根轴：主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向)；
3）任何一个容器都可以指定为flex布局：

块元素：display：flex；

行内元素：display:inline-flex；

2、容器属性
1）flex-direction
作用：项目在主轴上的排列方向
取值：row(默认值) row-reverse column column-reverse

2）flex-wrap
作用：容器空间不够时，是否允许项目换行
取值：nowrap(默认值) wrap wrap-reverse

3）justify-content
作用：项目在主轴上的对齐方式
取值：flex-start(默认值) flex-end center space-between space-around

4）align-items
作用：项目在交叉轴上的对齐方式
取值：flex-start flex-end center stretch(默认值) baseline

5）align-content
作用：有多根轴线时，在交叉轴上的对齐方式（因此只有当flex-wrap：wrap wrap-reverse才生效）
取值：flex-start flex-end center space-between space-around stretch（默认值）

6) flex-flow
flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写，默认值为row nowrap。

3、项目属性
1）flex-grow
作用：项目的放大比例，默认值为0，即容器存在剩余空间也不放大

2) flex-shrink
作用：项目的缩小比例，默认值为1，即容器空间不足时项目将缩小

3) flex-basis (这里约定主轴方向为row)
作用：content –> width –> flex-basis (limted by max|min-width)
http://gedd.ski/post/the-diff...

4）flex
作用：flex-grow flex-shrink和flex-basis的简写
flex：1 （等分布局）
https://developer.mozilla.org...

5)order
作用：定义了项目在容器中的排列顺序，数值越小，排列越靠前，默认值为0，在HTML中即使-2，-1的item排在后面，但是由于设置了order，使之排在了前面

6）align-self
作用：允许单个项目有与其他项目在交叉轴上不一样的对齐方式，优先级高于align-content
取值：auto（默认值）flex-start flex-end center baseline stretch

4、实战演练
1）等分布局：所有子项目flex：1
2）水平垂直居中：容器的justify-content和align-items属性设置为center

参考链接：
http://gedd.ski/post/the-diff...
https://developer.mozilla.org...

GPU云服务器云服务器 flex布局 flex flex40 flex 教程

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

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

CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

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

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

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

cnTomato 2019-08-01 15:01 评论0 收藏0
几种常见布局的flex写法

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式公式1：子元素空间 < 父容器父...

fish 2019-08-01 17:08 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0