Flex

最新推荐文章于 2023-10-19 22:58:29 发布

JarvisTH

最新推荐文章于 2023-10-19 22:58:29 发布

阅读量181

点赞数

分类专栏： learn

learn 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1.使用行内块布局的最大问题是会在html元素间渲染空白；
2.float：如果给浮动元素设置百分比，计算结果在不同平台上结果不同；通常需要清除浮动，才能避免父盒子/元素折叠。
3.display：table/table-cell。总体上说，需要在每个项目外面包一层（想要完美居中，表元必须被包在一个表格元素中）；也不可能把设置为display：table-cell的项目包到多行上。

Flexbox提供更好的解决方案。

方便的垂直居中内容
改变元素的视觉次序
在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白

IE9及以下版本不支持Flexbox

Flexbox
特性：

方向
对齐
次序
弹性

1.display：flex
Flexbox的根本所在，将当前元素设置为一个Flexbox。

2.align-items：在Flexbox中交叉轴对齐项目。

3.justify-content：在这里设置内容沿主轴居中。

4.偏移
在简单的导航选项中，让他们一个挨着一个排列。不用浮动，inline-block，table-cell。在包含元素上设置display：flexbox后，其子元素就会变为弹性项（flex-item），从而在弹性布局模型下布局。margin-left：auto可以让最后一项用上该侧所有可用的外边距。

<style type="text/css">
   .content{
    background-color: indigo;
    font-family: sans-serif;
    font-size: 1rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
   }
   
   .ss{
    color: #ebebeb;
    margin-right: 1rem;
   }
   
   .ll{
    margin-left: auto;
   }
  </style>
  
 </head>
 <body>
  <div class="content">
   <a href="" class="ss">1</a>
   <a href=""class="ss">2</a>
   <a href=""class="ss">3</a>
   <a href=""class="ss">4</a>
   <a href=""class="ll">5</a>
  </div>
 </body>

5.反序
给上述的包含元素css加一行flex-direction：row-reverse，再把最后一项的margin-left：auto改为margin-right：auto。

6.垂直排列
在上述的包含元素中使用flex-direction：column，再把自动边距删掉。

7.垂直反序
flec-direction：column-reverse；

有一个flex-flow属性，是flex-direction和flex-wrap的合
体。比如， flex-flow: row wrap; 就是把方向（ flex-direction）设置为
行（ row），把折行选项设置为折行（ wrap）。不过，至少一开始分别设置两个属性会更清楚一些。另外， flex-wrap属性在最早的 Flexbox实现中也不存在，
如果合起来写，在某些浏览器中可能导致整条声明失效。

8.行内伸缩
Flexbox与有inline-block，inline-table对应的inline-flex。如果将元素无端的设置为display：inline-flex（若包含该元素的元素没有设置diaplay：flex），那么这个元素就会像inline-block和inline-table一样保留元素间的空白。若元素处于Flexbox中，则空白消失，像table中得到table-cell一样。

9.对齐
理解坐标轴
有两个轴，‘主轴’与‘交叉轴’，两个轴的含义取决于Flexbox的排列方向。若方向为row，则主轴为横轴，交叉轴为纵轴。反之，方向为column，则主轴为纵轴，交叉轴为横轴。

align-items在交叉轴上定位元素。

align-self：若需要把元素按不同方式对齐，使用align-self决定自己的对齐方式。需要删除前面针对所有子元素的对齐属性，并在标记中再添加两个具有相同html类名（。FlexInnerlei）的元素。另外在中间的子元素上再添加。AlignSelf类，通过它来应用align-self属性。

交叉轴对齐
flex-start：把元素的对齐设置为flex-start，可以让元素从Flexbox父元素的起始边
开始。
 flex-end：把元素的对齐设置为flex-end，会沿Flexbox父元素的末尾对齐该元素。
 center：把元素放在Flexbox元素的中间。
 baseline：让Flexbox元素中的所有项沿基线对齐。
 stretch：让Flexbox中的所有项（没交叉轴）拉伸至与父元素一样大。

justify-content
控制沿Flexbox主轴对齐的属性是justify-content。
值：flex-start，flex-end，center，space-between，space-around。

justify-content可以告诉浏览器怎么处理其余空间。space-between会在子元素之间添加相同宽度的空白，而space-around则在它们两边各
添加相同宽度的空白。

10.flex
除了width，还可以通过flex属性来定义宽度，或者叫“伸缩性”（ flexiness）。
flex：1 1 100px；
1：伸展 1：收缩 100px：基准

对于伸缩项，如果flex属性存在（且浏览器支持），则使用它的值控制元素的大小，忽略宽度和高度值的设置，即使它们的声明位于flex声明之后，也会被忽略。下面分别看看这三个属性。
flex-grow（传给flex的第一个值）是相对于其他伸缩项，当前伸缩项在空间允许的情况下可以伸展的量。

lex-shrink是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。

flex-basis（传给flex的最后一个值）是伸缩项伸缩的基准值。

eg：
flex: 1 2 auto的意思是在有空间的情况下可以伸展1部分，在空间不足时可以收缩1部分，而基准大小是内容的固有宽度（即不伸缩的情况下内容的大小）。flex: 0 0 50px的意思是，这个伸缩项既不伸也不缩，基准为50像素（即无论是否存在自由空间，都是50像素）。那么flex: 2 0 50%呢？意思就是会多占用两个可用空间，不收缩，基准为50%。将flex-shrink的值设置为 0， flex-basis实际上就相当于最小宽度。

利用flexbox实现页脚粘附，改变原始次序。

自从有了CSS以来，就只有一种方法可以改变网页中HTML元素的视觉次序。那就是把元素包在一个设置为display: table的容器内，然后切换内部元素的display属性。想放到前头的，就切换成display: table-caption；想放在底部的，就切换成display: table-footergroup；或者想放在第二位的（位于display: table-caption之后），就切换成display:
table-header-group。

order属性可以在Flexbox中简单、明确地修改元素的次序。-1表示要位于其他所有元素之前。

JarvisTH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex

1.使用行内块布局的最大问题是会在html元素间渲染空白；2.float：如果给浮动元素设置百分比，计算结果在不同平台上结果不同；通常需要清除浮动，才能避免父盒子/元素折叠。3.display：table/table-cell。总体上说，需要在每个项目外面包一层（想要完美居中，表元必须被包在一个表格元素中）；也不可能把设置为display：table-cell的项目包到多行上。Flexbo...
复制链接

扫一扫