CSS

CSS弹性盒

xiongmao
2021-12-19 / 0 评论 / 84 阅读 / 正在检测是否收录...

目录:

弹性盒
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            width: 500px;
            border: 10px solid red;
         将ul设置为弹性容器
            display: flex;

flex(弹性盒,伸缩盒)
     - flex 可以使元素具有弹性,让元素可以随页面的大小的改变而改变
     - 弹性容器
     -要使用弹性盒,必须先将一个元素设置为弹性容器
     - 我们通过display 来设置弹性容器
            display:flex; 设置为块级弹性容器
            display:inline-flex 设置为行内的弹性容器
-弹性元素
        -弹性容器的子元素是弹性元素
        -弹性元素可以同时是弹性容器
           
          /*   flex-direction: row; */

          
    
flex-direction 指定容器中弹性元素的排列方式
   可选值:
        row 默认值,弹性元素在容器中水平排列(左向右)
          - 主轴 自左向右
        row-reverse 弹性元素在容器中反向水平排列(右向左)
          - 主轴 自右向左
        column 弹性元素纵向排列(自上向下)
        column-reverse 弹性元素方向纵向排列(自下向上)
                
主轴:
    弹性元素的排列方向称为主轴
侧轴
    与主轴垂直方向的称为侧轴
            
        }
        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
          /*   flex-grow: 1; */
            /* flex-shrink: 1; */

弹性属性
flex-grow 指定弹性元素的伸展的系数
     - 当父元素有多余空间的时,子元素如何伸展
     - 父元素的剩余空间,会按照比例进行分配
          
flex-shrink 指定弹性元素的收缩系数
   -当父元素中的空间不足以容纳所有的子元素时,如果对子元素进行收缩
          
        }
        li:nth-child(2){
            background-color: orange;
        }
        li:nth-child(3){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

弹性盒样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            width: 500px;
            border: 10px solid red;
            /* 将ul设置为弹性容器*/
            display: flex;
            /* flex-wrap:nowrap */

flex-wrap : 
设置弹性元素是否在弹性容器中自动换行
  可选值:
     nopwrap 默认值,元素不会自动换行
     wrap 元素沿者辅轴方向自动换行
     wrap-reverse 元素沿着辅轴反方向换行
     flex-flow: wrap 和 direction 的简写属性
     flex-flow;row wrap
            
            justify-content: space-between;

          
justify-content 
  如何分配主轴上的空白空间(主轴上的元素如何排列)
-可选值:
      flex-start 元素沿着主轴起边排列
      flex-end 元素沿着主轴终边排列
      center 元素居中排列
      space-around 空白分布到元素两侧
      space-between 空白均匀分布到两个元素之间
      space-evenly 空白分布到元素的单侧
        
            align-items: flex-start;

align-items
元素在辅轴上对齐
    可选值:
        stretch ,默认值 ,将元素的长度设置为相同的值
        flex-start 元素不会拉伸,沿者辅轴起边对齐
        flex-end 沿者辅轴的终边对齐
        center 居中对齐
        baseline 基线对齐
            

垂直水平居中:
        align-items: center;
        justify-content: center;
            


align-content : 辅路空白空间的分布
    align-content: space-between;
        }
        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
    
        }
        li:nth-child(2){
            background-color: orange;
            
align-self : 用来覆盖当前弹性元素上的align-items
            
            align-self: stretch;
        }
        li:nth-child(3){
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
弹性元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul{
            width: 500px;
            border: 10px solid red;
            /* 将ul设置为弹性容器*/
            display: flex;

        }
        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            

flex-grow:1;
     弹性的增长系数
            
flex-shrink:1;
   弹性元素的缩减系数
        -缩减系数的计算方式比较复杂
        -缩减多少是根据 缩减系数 和 元素大小来计算
            

            
元素基础长度
    flex-basis 指定的是元素在主轴上的基础长度
          如果主轴 是横向的则该值指定的元素的宽度
          如果主轴 纵向的 则该值指定是就是元素的高度
          -默认值是auto,表示参考元素自身的高度和宽度
          -如果传递了一个具体的数值,则以该值为准
            

flex 可以设置弹性元素的三个样式
      flex 增长 缩减1 基础
           initial "flex:0 1 auto"
           auto   "flex:1 1  auto "
           none "flex: 0 0 auto" 弹性元素没有弹性
            
            flex: initial;
        }
        li:nth-child(1){
order 决定弹性元素的排列顺序
            order: 3;
        }
        li:nth-child(2){
            background-color: orange;
            order: 1;
        }
        li:nth-child(3){
            background-color: blue;
            order: 2;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
0

打赏

海报

正在生成.....

评论

博主关闭了所有页面的评论