资讯专栏INFORMATION COLUMN

Flex布局

dongfangyiyu / 917人阅读

摘要:布局干什么用常常会因为元素居中之类的问题苦恼,这时就可以借助,它为盒状模型提供强大的灵活性。基本概念采用布局的元素,称为容器,简称容器,容器子元素称为项目,简称项目。

Flex布局干什么用?

常常会因为元素居中之类的问题苦恼,这时就可以借助Flex(Flexible Box),它为盒状模型提供强大的灵活性。

基本概念

采用Flex布局的元素,称为Flex容器,简称“容器”,容器子元素称为Flex项目,简称“项目”。

两轴:主轴(main axis)、交叉轴(cross axis);

两轴起始位置:main start和main end、cross start和cross end;

属性
display:other values | flex | inline-flex;

css的columns在伸缩容器上没有效果

float、clear和vertical-align在伸缩项目上没有效果

属性 容器属性
属性 说明 特性
flex-direction 主轴方向 排列
flex-wrap 项目换行效果 排列
flex-flow flex-direction和flex-wrap复合属性 排列
justify-content 定义伸缩项目沿着主轴线的对齐方式 对齐
align-items 定义子项在容器内沿侧轴线的对齐方式 对齐
align-content 调准伸缩行在伸缩容器里的对齐方式 对齐
项目属性
属性 说明 特性
order 控制伸缩项目在他们的伸缩容器出现的顺序 排列
flex-grow 定义子项宽度之和不足父元素宽度时,子项拉伸的比例 面积
flex-shrink 定义子项宽度之和超过父元素宽度时,子项缩放的比例 面积
flex-basis 定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放 对齐
flex flex-grow、flex-shrink、flex-basis缩写 面积
align-self 定义单个子项与其他项目不一样的对齐方式 对齐
图解容器属性

flex-direction(创建主轴,定义项目的方向)

flex-direction: row | row-reverse | column | column-reverse;

row(默认值):在“ltr”排版方式下从左向右排列;在“rtl”排版方式下从右向左排列。

flex-wrap(项目换行)

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow(复合属性)

flex-flow: flex-direction || flex-wrap

justify-content(定义伸缩项目沿着主轴线的对齐方式)

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items(定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式)

align-items: flex-start | flex-end | center | baseline | stretch;

align-content(调准伸缩行在伸缩容器里的对齐方式)

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

请注意本属性在只有一行的伸缩容器上没有效果

项目属性

order(控制伸缩项目在他们的伸缩容器出现的顺序)

order:[integer] /* 传入整数,default 0 */

flex-grow(定义子项宽度之和不足父元素宽度时,子项拉伸的比例)

flex-grow:[number] // 传入数字,default 0

flex-shrink(定义子项宽度之和超过父元素宽度时,子项缩放的比例)

flex-shrink:[number] // 传入数字, default 1

flex-basis(定义子项的初始宽度,若子项宽度之和超过父元素宽度时,子项按照flex-basis的比例缩放)

flex-basis: [length] | [percentage]  | auto; /* default auto*/

flex(flex-grow、flex-shrink、flex-basis缩写)
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self(定义单个子项与其他项目不一样的对齐方式)

align-self: auto | flex-start | flex-end | center | baseline | stretch;

参考资料

Flex 布局教程:语法篇
一个完整的Flexbox指南
不再混淆,一次搞懂!图解flexbox十余个属性

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

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

相关文章

  • CSS6:flex布局

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

    Jioby 评论0 收藏0
  • 结合CSS3的布局新特征谈谈常见布局方法

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

    xuhong 评论0 收藏0
  • 结合CSS3的布局新特征谈谈常见布局方法

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

    cnTomato 评论0 收藏0
  • 几种常见布局flex写法

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

    fish 评论0 收藏0
  • 我所知道的flex布局 —— 上篇

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

    andycall 评论0 收藏0
  • CSS Flex 布局:用 Flex 来实现圣杯布局

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

    Olivia 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<