[css] flex 详解

最新推荐文章于 2024-09-20 22:24:22 发布
最新推荐文章于 2024-09-20 22:24:22 发布
阅读量179 收藏
点赞数
原文链接：http://www.cnblogs.com/qingmingsang/articles/6366141.html
版权

详细的demo

flex

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>


none： none关键字的计算值为: 0 0 auto

<' flex-grow '>：
    用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
    在「flex」属性中该值如果被省略则默认为「1」
    
<' flex-shrink '>：
    用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
    在收缩的时候收缩比率会以伸缩基准值加权
    在「flex」属性中该值如果被省略则默认为「1」
    
<' flex-basis '>：
    用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
    在「flex」属性中该值如果被省略则默认为「0%」
    在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，
    如果自身的宽度没有定义，则长度取决于内容。

复合属性。
设置或检索弹性盒模型对象的子元素如何分配空间。

    如果缩写「flex: 1」, 则其计算值为「1 1 0%」
    如果缩写「flex: auto」, 则其计算值为「1 1 auto」
    如果「flex: none」, 则其计算值为「0 0 auto」
    如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

如下情况每个元素的计算宽是多少

    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    .flex{display:flex; width:800px; margin:0;padding:0;list-style:none;}
    .flex :nth-child(1){flex:1 1 300px;}
    .flex :nth-child(2){flex:2 2 200px;}
    .flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，
那么子元素将会溢出900-800=100px；
由于同时设置了收缩因子，所以加权综合可得300*1+200*2+400*3=1900px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(300*1/1900)*100，即约等于16px
b被移除溢出量：(200*2/1900)*100，即约等于21px
c被移除溢出量：(400*3/1900)*100，即约等于63px
最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px

将容器的宽度改成1500px

    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    .flex{display:flex; width:1500px; margin:0;padding:0;list-style:none;}
    .flex :nth-child(1){flex:1 1 300px;}
    .flex :nth-child(2){flex:2 2 200px;}
    .flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余宽度；
于是我们可以计算a,b,c将被扩展量是多少：
a的扩展量：(1/(1+2+3))*600，即约等于100px
b的扩展量：(2/(1+2+3))*600，即约等于200px
c的扩展量：(3/(1+2+3))*600，即约等于300px
最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px
从本例能看出：
当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），
「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

当「flex-basis」在「flex」属性中等于0时，
「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），
所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度

flex-grow

flex-grow：<number>

默认值：0

<number>：用数值来定义扩展比率。不允许负值


设置或检索弹性盒的扩展比率。
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

b,c将按照1:3的比率分配剩余空间

    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    .flex{display:flex; width:600px; margin:0;padding:0;list-style:none;}
    .flex li:nth-child(1){width:200px;}
    .flex li:nth-child(2){flex-grow:1;width:50px;}
    .flex li:nth-child(3){flex-grow:3;width:50px;}

flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3

flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

a: 200px

b: 50+(300/4*1)=125px

c: 50+(300/4*3)=275px

771172-20170216101755363-721687715.png

flex-shrink

flex-shrink：<number>

默认值：1

<number>：用数值来定义收缩比率。不允许负值


设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

a,b,c将按照1:1:3的比率来收缩空间

    <ul class="flex">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    .flex{display:flex; width:400px; margin:0;padding:0;list-style:none;}
    .flex li{width:200px;}
    .flex li:nth-child(3){flex-shrink:3;}

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，
可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

我们可以看到父容器定义为400px，子项被定义为200px，200*3为600px，超出父容器200px。
那么这么超出的200px需要被a,b,c消化

通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即约等于40px
b被移除溢出量：(200*1/1000)*200，即约等于40px
c被移除溢出量：(200*3/1000)*200，即约等于120px
最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

实际的算法应该比上面这个更复杂一点，但是数值相差不大

771172-20170216101543738-273815315.jpg

flex-basis

flex-basis：<length> | <percentage> | auto | content

<length>：       用长度值来定义宽度。不允许负值
<percentage>：   用百分比来定义宽度。不允许负值
auto：           无特定宽度值，取决于其它属性值
content：        基于内容自动计算宽度


设置或检索弹性盒伸缩基准值。
如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间

flex-flow

flex-flow：<' flex-direction '> || <' flex-wrap '>

<' flex-direction '>：   定义弹性盒子元素的排列方向。
<' flex-wrap '>：        控制flex容器是单行或者多行。

复合属性。
设置或检索弹性盒模型对象的子元素排列方式。

flex-direction

flex-direction：row | row-reverse | column | column-reverse

默认值：row

row：                
    主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：        
    对齐方式与row相反。
column：         
    主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse： 
    对齐方式与column相反。


该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。
这将决定flex需要如何进行排列
该属性的反转取值不影响元素的绘制，语音和导航顺序，只改变流动方向。
这与 <' writing-mode '> 和 <' direction '> 相同。

771172-20170216101738441-1585823315.png

flex-wrap

flex-wrap：nowrap | wrap | wrap-reverse

默认值：nowrap

nowrap：     
    flex容器为单行。该情况下flex子项可能会溢出容器
wrap：           
    flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：   
    反转 wrap 排列。

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

771172-20170216101600504-319091000.png

align-content

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

默认值：stretch


flex-start：
    各行向弹性盒容器的起始位置堆叠。
    弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，
    之后的每一行都紧靠住前面一行。
flex-end：
    各行向弹性盒容器的结束位置堆叠。
    弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，
    之后的每一行都紧靠住前面一行。
center：
    各行向弹性盒容器的中间位置堆叠。
    各行两两紧靠住同时在弹性盒容器中居中对齐，
    保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。
    （如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
space-between：
    各行在弹性盒容器中平均分布。
    如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。
    在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，
    最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，
    剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around：
    各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
    如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。
    在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，
    同时第一行前面及最后一行后面的空间是其他空间的一半。
stretch：
    各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。
    在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。


当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，
这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。

!!! 该属性在只有一行的伸缩容器上没有效果。

771172-20170216101624722-1188464040.png

align-items

align-items：flex-start | flex-end | center | baseline | stretch

默认值：stretch

flex-start：
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
    弹性盒子元素在该行的侧轴（纵轴）上居中放置。
    （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。
    其它情况下，该值将参与基线对齐。
stretch：
    如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
    但同时会遵照'min/max-width/height'属性的限制。

    
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

771172-20170216101633957-1911007618.png

align-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

默认值：auto

计算值：如果值为「auto」，则计算值为父元素的 <' align-items '> 值，否则为指定值。

auto：
    如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，
    如果其没有父元素，则计算值为'stretch'。
flex-start：
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
    弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
    弹性盒子元素在该行的侧轴（纵轴）上居中放置。
    （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。
    其它情况下，该值将参与基线对齐。
stretch：
    如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
    但同时会遵照'min/max-width/height'属性的限制。

定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

771172-20170216101643535-325889236.png

justify-content

justify-content：flex-start | flex-end | center | space-between | space-around

默认值：flex-start

flex-start：
    弹性盒子元素将向行起始位置对齐。
    该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，
    同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：
    弹性盒子元素将向行结束位置对齐。
    该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，
    同时所有后续的伸缩盒项目与其前一个项目对齐。
center：
    弹性盒子元素将向行中间位置对齐。
    该行的子元素将相互对齐并在行中居中对齐，
    同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距
    （如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：
    弹性盒子元素会平均地分布在行里。
    如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。
    在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，
    同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，
    并确保两两之间的空白空间相等。
space-around：
    弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
    如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。
    在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，
    同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。


设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，
这一属性可协助对多余的空间进行分配。
当元素溢出某行时，这一属性同样会在对齐上进行控制。

771172-20170216101653957-1731215849.png

order

order：<integer>

默认值：0

适用于：flex子项和flex容器中的绝对定位子元素

<integer>：  用整数值来定义排列顺序，数值小的排在前面。可以为负值。



设置或检索弹性盒模型对象的子元素出現的順序。
order定义将会影响 <' position '> 值为static元素的层叠级别，
数值小的会被数值大的盖住。

771172-20170216101707957-1975563786.png

align-items 与 align-content 的区别

align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。

align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。

同样是center的效果，

单行 align-items：
771172-20170204183102526-859549586.png

单行 align-content：
771172-20170204183109808-390402527.png

多行 align-items：
771172-20170204183118214-111218013.png

多行 align-content：
771172-20170204183125776-793393294.png

转载于:https://www.cnblogs.com/qingmingsang/articles/6366141.html

aefg95955
关注
像素、视口、移动端页面、VW适配、响应式布局、媒体查询
qq_43672677的博客
05-24 690
像素 像素： - 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素 - 分辨率：1920 x 1080 说的就是屏幕中小点的数量 - 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素 - 物理像素，上述所说的小点点就属于物理像素 - CSS像素，编写网页时，我们所用像素都是CSS像素 - 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 - 一个css像素最终由几个物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个物理像素 视口（viewport） -
CSS之Flex布局的详细解析
qq_69748833的博客
10-19 2606
添加一个。
css flex
hugejihu9的专栏
12-29 304
文章来自：源码在线https://www.shengli.me/css/515.html    
CSS 弹性盒子/Flex布局
Evelyn_178的博客
09-20 775
flex布局 flex属性 项目属性 容器属性
CSS flex
whan8080的专栏
03-31 661
CSS flexible Box Layout 弹性盒模型针对用户界面设计进行了优化，弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。从而使子元素可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出，更好的适应父元素的大小。flex优点：1.便于对齐元素。.box { /*定义一个flex contianer*/ display: flex; /...
CSS Flex布局详解及其重要属性应用
最新发布
10-09
内容概要：本文深入讲解了CSS Flex布局的基本理念以及其对于现代Web开发尤其是移动互联网的重要性。详述了flex布局下父级flex container及子元素flex item的相关属性，具体介绍了flex-direction、flex-wrap等关键...
2022年Vue面试题：Vue全家桶、Axios与Ajax对比、CSS Flex详解
“面试题，涵盖Vue.js全家桶、Vue与其他框架的比较、vue-router与href的区别、axios与Ajax的对比、CSS flex布局以及JavaScript中的eval函数和数据存储方法。” ## Vue.js全家桶 Vue.js全家桶主要包含以下组件： 1. ...
CSS-flex
natsu-cc的博客
04-28 139
前言： Flexible Box 模型，通常被称为 flexbox，意为"弹性布局"，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 .box{ display: flex; } 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。类如垂直居中等场景就要比较复杂实现。 基本概念： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员
CSS——弹性盒模型(Flex)
qq_60361946的博客
08-06 1042
本文大部分参考自阮一峰老师和B站UP主后盾人的Flex布局教程。
CSS——弹性盒（flex）
Fan_web的博客
08-16 1903
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
Css flex属性
benben0729的专栏
09-28 960
flex布局 注意：设为flex布局之后，子元素的float,clear和vertical-align属性将会失效 基本概念 名称 描述 flex container 容器（采用flex布局的元素，举例div1） flex item 容器内的成员（项目，举例div1下的标签） main axis 水平轴 cross axis 垂直交叉轴（纵轴） ...
CSS布局：Flex布局
前端御书房
11-26 1330
flex布局又称为弹性布局。弹性布局相关属性分为四大类目，分别为流向控制、对齐方式、顺序控制、弹性设置。
CSS中的flex布局
weixin_67644104的博客
01-15 6698
CSS中的flex布局
CSS：flex布局
u013938578的博客
02-22 481
1.基本概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 这里需要强调，不能先入为主认为宽度就
CSS中的Flex布局
热门推荐
zheshiyangyang的博客
05-21 1万+
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
Flex布局 弹性盒子
chenhe2004的博客
11-21 239
一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值