CSS弹性盒子

最新推荐文章于 2024-07-19 15:50:46 发布

MidJuly~

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量197

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/plutozxc/article/details/117385755

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS弹性盒子

- flex有多个属性
谢谢观看

在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。可以写入到多个组件中.

flex有多个属性

flex-direction:row;
/*
默认值:row 		行排列
column 			列排序
row-reserve  	行倒置
column-reserve	列倒置
*/

flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。
可以通过 justify-content 属性的不同值来实现。

justify-content

<style>
        #box-container {
            background: gray;
            display: flex;
            height: 500px;
            /* 居中排列 */
            justify-content: center; 
            /* 从flex的开始位置排列,如果是行就移到左边,如果是列就移动到顶部 */
            justify-content: flex-start;
            /* 从flex的终止位置排列,如果是行就移到右边,如果是列就移到底部 */
            justify-content: flex-end;
            /* 项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 */
            justify-content: space-between;
            /* 和space-between相似,但不会紧贴边缘,均匀排列 */
            justify-content: space-around;
            justify-content: space-evenly;
        }
    
        #box-1 {
            background-color: dodgerblue;
            width: 25%;
            height: 100%;
        }
    
        #box-2 {
            background-color: orangered;
            width: 25%;
            height: 100%;
        }
    </style>
    
    <div id="box-container">
        <div id="box-1"></div>
        <div id="box-2"></div>
    </div>

align-items

align-items 属性与 justify-content 类似。 align-items就是沿交叉轴对齐,与主轴垂直的叫做 cross axis（交叉轴）。
行的交叉轴是垂直的，列的交叉轴是水平的。

<style>
        #box-container {
            background: gray;
            display: flex;
            height: 500px;
            /*  align-items 属性与 justify-content 类似。 
            与主轴垂直的叫做 cross axis（交叉轴）。 
            行的交叉轴是垂直的，列的交叉轴是水平的。
            align-items就是沿交叉轴对齐*/

            /* 从 flex 容器的起始位置开始对齐项目。 
            对行来说，把项目移至容器顶部； 
            对列来说，是把项目移至容器左边。 */
            align-items: flex-start;
            /* 和flex-end相反 */
            align-items: flex-end;
            /* 居中对齐，如果是交叉轴是垂直的就是上下距离相等,是水平的就是左右距离相等 */
            align-items: center;
            /* 拉伸,填满 */
            align-items: stretch;
            /* 沿基线对齐,默认是和文本相关,字母排列的下端基准线 */
            align-items: baseline;
        }
    
        #box-1 {
            background-color: dodgerblue;
            width: 200px;
            font-size: 24px;
        }
    
        #box-2 {
            background-color: orangered;
            width: 200px;
            font-size: 18px;
        }
    </style>
    
    <div id="box-container">
        <div id="box-1">
            <p>Hello</p>
        </div>
        <div id="box-2">
            <p>Goodbye</p>
        </div>
    </div>

flex-wrap

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

<style>
        #box-container {
            background: gray;
            display: flex;
            width: 700px;
            height: 700px;
            /* flex-direction: column; */
            /* 如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列 */
            flex-wrap: wrap;
            flex-wrap: nowrap;
            flex-wrap: wrap-reverse;
        }
    
        #box-1 {
            background-color: dodgerblue;
            width: 25%;
            height: 50%;
        }
    
        #box-2 {
            background-color: orangered;
            width: 25%;
            height: 50%;
        }
    
        #box-3 {
            background-color: violet;
            width: 25%;
            height: 50%;
        }
    
        #box-4 {
            background-color: yellow;
            width: 25%;
            height: 50%;
        }
    
        #box-5 {
            background-color: green;
            width: 25%;
            height: 50%;
        }
    
        #box-6 {
            background-color: black;
            width: 25%;
            height: 50%;
        }
    </style>
    
    <div id="box-container">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
        <div id="box-4"></div>
        <div id="box-5"></div>
        <div id="box-6"></div>
    </div>

flex-shrink

shrink意思是收缩.
使用之后，如果 flex 容器太小，则子元素会自动缩小。
当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩
flex-shrink取值越大，缩小得越厉害
box-1的flex-shrink值为1, box-2的flex-shrink值为3,

如果元素大小和超过了父元素,那么就按比例缩小,
最终的值是如下计算
宽度都为100%计算的.
box-1: 1-(1/(1+3)) = 3/4
box-2: 1-(3/(1+3)) = 1/4

也可以具体举个栗子
父元素为600px, box1为400px,flex-shrink为2, box2是600px, flex-shrink为4;
超出400+600-600 = 400px
最终:
box1: 400-400*(400*2/(400*2+600*4)) = 300px
box2: 600-400*(400*2/(400*2+600*4)) = 300px;

    <style>
        #box-container {
            display: flex;
            height: 500px;
        }
        /* 使用之后，如果 flex 容器太小，则子元素会自动缩小。 
        当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩
        flex-shrink取值越大，缩小得越厉害 */

        /* 计算方法
        如果元素大小和超过了父元素,那么就按比例缩小
        box-1:  1-(1/(1+3)) = 3/4 
        box-2:  1-(3/(1+3)) = 1/4
        */
        #box-1 {
            background-color: dodgerblue;
            width: 100%;
            height: 200px;
            flex-shrink: 1;
        }
    
        #box-2 {
            background-color: orangered;
            width: 100%;
            height: 200px;
            flex-shrink: 3;
        }
    </style>
    
    <div id="box-container">
        <div id="box-1"></div>
        <div id="box-2"></div>
    </div>

flex-grow

与 flex-shrink 相对的是 flex-grow。你应该还记得，flex-shrink 会在容器太小时对子元素作出调整。相应地，flex-grow 会在容器太大时对子元素作出调整。

父元素600px,
box1: 100px, flex-grow=1;
box2:200px, flex-grow=2;
子元素宽度和小于父元素,flex-grow就可以根据值调整了.
这次可以自己尝试计算一下,和flex-shrink计算方法类似的

    <style>
        #box-container {
            display: flex;
            height: 500px;
            width: 600px;
        }
    
        #box-1 {
            background-color: dodgerblue;
            height: 200px;
            width: 100px;
            flex-grow: 1;
        }
    
        #box-2 {
            background-color: orangered;
            height: 200px;
            width: 200px;
            flex-grow: 2;
        }
    </style>
    
    <div id="box-container">
        <div id="box-1"></div>
        <div id="box-2"></div>
    </div>

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis:10em;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis:20em;  
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。
例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
属性的默认设置是 flex: 0 1 auto;。

order

order 属性告诉 CSS flex 容器里子元素的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。
值越小排序越靠前;

<style>
        #box-container {
            display: flex;
            height: 500px;
        }
    
        #box-1 {
            background-color: dodgerblue;
            order: 2;
            height: 200px;
            width: 200px;
        }
    
        #box-2 {
            background-color: orangered;
            order: 1;
            height: 200px;
            width: 200px;
        }
    </style>

align-self

这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    align-self:center;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    align-self:flex-end;  
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

谢谢观看

💖

MidJuly~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS弹性盒子

CSS弹性盒子flex有多个属性justify-contentalign-itemsflex-wrap在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。可以写入到多个组件中.flex有多个属性flex-direction:row;/*默认值:row 行排列column 列排序row-reserve 行倒置column-reserve 列倒置*/flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告
复制链接

扫一扫