前端学习笔记—弹性盒子

最新推荐文章于 2024-04-24 17:58:49 发布

hi_阿洋

最新推荐文章于 2024-04-24 17:58:49 发布

阅读量1.1k

点赞数 4

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/hu2600/article/details/83542972

版权

3 篇文章 0 订阅

订阅专栏

<div id="div-contain">
<div id="first"></div>
<div id="second"></div>
</div>

父元素中的属性

采用弹性盒子需要在父元素的CSS中添加默认为从左至右排列。

#div-contain{display:flex;}

添加了display: flex的元素会成为 flex容器。只要把flex-direction属性添到父元素，并设置其为 row 或 column即可轻易横或竖排列它的子元素。设为 row 可以让子元素水平排列，column可以让子元素垂直排列。

#div-contain{flex-direction:row;}
//默认为row
//其他的选项：
 - column——垂直排列
 - row-reverse 水平从右向左排列
 - column-reverse 垂直下往上排列

不同的排列方式默认的主轴和纵轴的方向不相同，row的主轴为水平轴。column的主轴为垂直的纵轴。

关于 flex 子元素在主轴上的排列方式，可以选择以下值：其中一个很常用的是justify-content: center;，可以让 flex 子元素排列在flex容器中间。其他可选值还有：

flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。
flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。
space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。
space-around:与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边

关于 flex 子元素在纵轴上的排列方式，可以选择以下值：其中一个很常用的是align-items: center;，可以让 flex 子元素排列在flex容器中间。其他可选值还有：

CSS flexbox有一个把flex子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。

不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。

换行方向的可选值有这些：

flex-shrink:使用之后，如果flex容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。

flex-shrink:1;//一倍收缩
flex-shrink:2; //两倍收缩

flex-grow:会在容器太大时对元素作出调整。

flew-grow:1; //一倍扩展
flex-grow:2; //两倍扩展

##项目初始大小##
flex-basis指定CSS在进行flex-shrink和flex-grow调整前的初始大小，单位为（em,px,%）

flex-basis:10em;
flex-basis:10px;
flex-basis:10%;

flex缩写方法
flex：1          2               auto 
flex:flex-grow  flex-shrink     flex-basis

order

    #div1{order:2;}//排在第二位
    #div2{order:1;}//排在第一位

align-self的允许值与align-items一样，并且它会覆盖align-items的值。

  align-self:center

关注