flex布局-学习

hedzr 发布于2019-08-29 11:16 / 2470人阅读

摘要：今天上网找了下各种的博文学习了一番资料如下阮一峰的网络日志年提出了布局特点是简便完整响应式兼容性如下查询链接介绍意思为弹性布局任何一容器都可以指定为布局甚至行内元素也可以但是由于支持的情况各不相同我们还是需要对属性做兼容性处理如加上

今天,上网找了下各种flex的博文学习了一番,资料如下:
阮一峰的网络日志
Dive into Flexbox
2009年,W3C提出了---Flex布局,特点是

简便

完整

响应式

兼容性如下
查询链接

介绍

Flex(Flexible Box),意思为"弹性布局"
任何一容器都可以指定为Flex布局,甚至行内元素也可以

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

但是由于支持的情况各不相同,我们还是需要对属性做兼容性处理如加上-webkit-前缀等.

失效特性

float

clear

vertical-align

理解

容器采用flex布局后,就被称为flex容器(flex container),子元素被称为容器成员,为flex项目(flex item)
对于flex布局其实理解下图即可

容器中默认有两根轴,主轴(main axis)和cross axis(交叉轴)
开始结束位置分别为main/cross start和main/cross end
排列的顺序为main/cross direction.
flex item占据main axis上空间为main size,占据cross axis上的空间为cross size.

flex属性 容器属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction
用于改变flex容器的轴线,默认值为row

row(default)

row-reverse(就和后缀一样,为main axies反向排列)

column(改变轴线为cross axies,为cross axies方向排列)

column-reverse(同理改变轴线,cross axies方向反向排列)

justify-content
用于改变flex容器中flex item在轴线上的位置

flex-start(default,从axies start开始紧靠排列)

flex-end(axies end端紧靠排列)

center(展现如其名,axies中间)

space-between(相当于将空间等分,每份空间中flex-start排列)

space-around(空间等分,每份空间中center排列)

align-items
为justify-content的补充属性,为flex item在非flex-direction指定的另一轴线的位置

flex-start(default)

flex-end

center
以上三种也就不赘述啦

stretch (如同属性名一样,将元素在轴向上伸展开来,注意在固定了height的情况下不会拉伸)

baseline (定位线为item中第一行文字的底部线,根据该线进行定位,也就是基线对齐,取距离start最长的基线对齐)
值得注意的是属性值baseline,其基线的定义需要进一步了解

链接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基线定义会根据情况不同而变化,通常情况下为第一项的底线(文字底部/图片底部),无内容的flex item为flex item底部border线.

flex-wrap
直到现在为止,每个Flex 容器只有一条Flex Line,使用flex-wrap,我们能创建一个拥有多条Flex Line的Flex 容器

nowrap(default)

wrap

wrap-reverse
设置为wrap时,假如我们一行空间不够,我们的flex item在空间不足时会进行换行.创建新的一行.

设置为wrap-reverse时,在wrap换行效果的同时,将会反向展现

align-content
该属性定义了flex-wrap的行为,这和align-item有点相似,但是和其不同的是该属性align的是Flex Line.

stretch(default)

flex-start

flex-end

center

space-between

space-around
看到他们其实大概就知道是怎么回事啦,这里也就不多说了,其实想象一下就知道了,主要是用于设置行/列位置的属性

flex-flow
= flex-direction + flex-wrap
用于快速设置上述两个属性.

项目(item)属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

值得注意的属性
margin
在flex布局中,margin:auto是一个很有用的属性,设置后会自动吸收多余的空间,可以利用flex item的该属性进行多样化的布局.

order
设置元素的顺序,数值越小,排列越前,默认为0

flex-grow
为放大比例,默认为0

flex-shrink
定义了缩小比例,默认为1,即如果空间不足,项目将会缩小
所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0;数值代表被缩小的程度
!负值无效者缩小

flex-basis
在分配多余空间前,项目占据的主轴的空间,浏览器将根据该属性,计算主轴空间是否有多余空间.

auto(default)

设定为width/height一样的值如50px,即固定项目占据的空间

flex
顺序为 flex-grow flex-shrink flex-basis,默认为0 1 auto,后两个属性为可选选项
auto(1 1 auto)/none(0 0 auto)

align-self
用于覆盖Flex容器中的align-items属性,它有和align-items相同的属性值

auto(继承align-items属性,无父元素则等同于stretch)

stretch

flex-start

flex-end

center

baseline

云服务器 GPU云服务器 flex布局学习css布局 flex flex40

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

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

FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

warnerwu 2019-08-02 16:09 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

MyFaith 2019-08-30 15:43 评论0 收藏0
微信小程序开发必备必看常用的Flex布局模式－wxflex

摘要：首发地址微信小程序的布局种必备常用的布局模式代码库地址官方建议的布局的布局相比传统的布局来说，简单快捷方便。首发地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo－4种必备常用的Flex布局模式代码库 github地址：https://github.com/icindy/wxflex 官方建议的Flex布局 Fle...

jzzlee 2019-08-29 11:28 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
学习关于display ：flex 布局问题！

摘要：什么是呢答是的缩写，意为弹性布局这个东西的引入，为盒模型提供了最大的灵活性可以相应式的实现各种页面的布局。基本概念采用布局的元素，称为容器，简称容器。在这个容器中默认存在两个轴水平方向的主轴和垂直方向上的交叉轴。很多人不明白这个display:flex是到底是什么东西，如何使用的。 1.什么是display：flex呢？答：flex是 flexible box的缩写，意为弹性布局；...

番茄西红柿 2019-04-23 13:27 评论0 收藏0