48、弹性容器、元素的样式

最新推荐文章于 2022-01-19 21:20:24 发布

五仁卤鸡翅

最新推荐文章于 2022-01-19 21:20:24 发布

阅读量195

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/MoonNight608/article/details/107490949

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
弹性容器的样式
弹性元素的样式

介绍

文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

弹性容器的样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0;
    list-style:none;
}
ul{
    width:800px;
    border: 10px red solid;
    display:flex；
    flex-direction:column

    1、flex-wrap:
          设置弹性元素是否在弹性容器中自动换行
          可选值：
            nowwrap  默认值，元素不会自动换行
            wrap    元素沿着辅轴方向自动换行 
            wrap-reverse 元素沿着辅轴反方向换行          
  
    flex-wrap:wrap-reverse
    
    
   2、flex-flow: wrap 和direction的简写属性
   
     flex-flow: row wrap;
    
   
   3、justify-content:
          - 如何分配主轴上的空白空间（主轴上的元素如何排列）
          - 可选值：
             flex-start:元素沿着主轴起边排列
             flex-end :元素沿着主轴的终边排列
             center: 元素居中排列
             space-around: 空白分配到元素两侧
             space-evenly: 表示空白只分配到一侧
             space-betwen: 空白分配到元素中间
   
    justify-content:space-around
        
  
   3、align-items:
          - 元素在辅轴上如何对齐
          - 元素间的关系
             可选值：
              stretch    默认值 将元素的长度设置为相同的，指的是每行元素高度相同
              flex-start 元素不会拉伸，沿着辅轴起边对齐
              flex-end   元素沿着辅轴终边对齐
              center     居中对齐 
              baseline  基线对齐
              
    */
    align-items:center
    
 4、align-content:辅轴空白空间的分配
          与justify-content 值一样
     
    
    /* 设置元素垂直、水平对齐*/
 5、justify-content:center;
    align-items:center
    
    
   
 6、align-self: 弹性元素的属性，用来覆盖当前弹性元素上的align-item
                align-self:stretch
  
}
li{
    width:100px;
    height：100px;
    background-color:orange;
    font-size:50px;
    text-align:center;
    line-height:100px;
    flex-grow:0
}
li:nth-child(2){
    background-color:pink;
}
li:nth-child(3){
    background-color:orange
}

</style>
<body>
<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

</body>
</html>

弹性元素的样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    margin:0;
    padding:0;
    list-style:none;
}
ul{
    width:800px;
    border: 10px red solid;
    display:flex；
    flex-direction:column
    flex-wrap:wrap-reverse
   
}
li{
    width:100px;
    height：100px;
    background-color:orange;
    font-size:50px;
    text-align:center;
    line-height:100px;
   
       1、flex-grow:弹性元素的增长系数
       
       2、flex-shrink 弹性元素缩减系数
          默认值 1
          - 缩减系数的计算复杂
          - 缩减多少是根据 缩减系数 和元素大小来计算的
             （元素越大，缩减越多 ） 
       
       3、flex-basis: 元素在主轴上的基础长度
                   如果主轴是横向的，则该值指定的是元素的宽度
                   如果主轴是纵向的，该值指定的就是元素的高度
                   默认值是auto,表示参考元素自身的高度或宽度 
                   如果传递了一个具体数，则以该值为主   
                  

  
      4、flex 可以设置弹性元素的所有样式
           flex 增长 缩减 基础
             initial   "flex:0 1 auto"
             auto      "flex:1 1 auto"
             none      "flex:0 0 auto"  弹性元素没有弹性
    
    flex-grow:0；
    flex-shrink:1
   
   5、order 决定弹性元素的排列顺序
   
}
li:nth-child(2){
    background-color:pink;
    order:1
}
li:nth-child(3){
    background-color:orange
}

</style>
<body>
<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
48、弹性容器、元素的样式

文章目录介绍弹性容器的样式弹性元素的样式介绍文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记弹性容器的样式<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style>*{ margin:0; padding:0; list-style:none;}ul{
复制链接

扫一扫