当前位置： 移动技术网 > IT编程>网页制作>HTML > 47、flex

47、flex

2020年07月22日  | 移动技术网IT编程  | 我要评论

文章目录

介绍

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

flex

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

 1、flex(弹性盒，伸缩盒)
    - 是css中的一种布局手段，它主要用来代替浮动来完成页面布局
    - flex 可以使元素具有弹性，让元素可以根据页面的大小改变而改变
    
    -弹性容器：
       -要使用弹性盒，必须先将一个元素设置为弹性容器
         1、display 设置弹性容器
              display:flex   设置为块级弹性容器 独占一行
              display:inline-flex 设置为行内的弹性容器
           
         2、flex-direction 指定容器中弹性元素的排列方式
              可选值：
                row          默认值 弹性元素哎容器中水平排列（左向右）
                               - 主轴自左向右
                row-reverse  弹性容器在容器中反向水平排列（右向左）
                              - 主轴自右向左 
                column       弹性元素纵向排列（自上向下） 
                column-reverse 弹性元素自下向上
              
         -主轴： 弹性元素排列方向
         -侧轴： 与主轴垂直方向的为侧轴
         
  2、弹性元素
       - 容器的子元素为弹性元素（弹性项）
       - 一个容器可以同时是弹性容器和弹性元素
       
       flex-grow: 指定弹性元素的伸展的系数
             - 当父元素有多余的空间的时候，子元素如何伸展
                  -  默认值 0 表示不伸展
                  -  值越大伸展的越多
             - 父元素的剩余空间，会按照比例进行分配  
       
       flex-shrink: 指定弹性元素的收缩系数
              当父元素的空间不足以容纳所有子元素时，如何对子元素进行收缩
              -  默认值 1 等比例收缩
              -  值越大收缩的越大
                         

*{
    margin:0;
    padding:0;
    list-style:none;
}
ul{
    width:800px;
    border: 10px red solid;
    display:flex；
    flex-direction:column
}
li{
    width:100px;
    height：100px;
    background-color:orange;
    font-size:50px;
    text-align:center;
    line-height:100px;
    flex-grow:1
}
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>
.nav{
    width:1210px;
    height:45px;
    line-height:45px;
    background-color:gray;
    dispaly:flex;
    
}
.nav li{
    flex-grow:1;
    text-align:center
}
.nav a{
    display:block;
    color:white;
    text-decration:none;
    font-size:16px;
       
}
.nav a:hover{
    background-color:#636363;
    color:#fff;
}

</style>
<body>
<ul class="nav">
  <li><a href="#">html</a></li>
  <li><a href="#">html</a></li>
  <li><a href="#">html</a></li>
  <li><a href="#">html</a></li>
  <li><a href="#">html</a></li>
</ul>

</body>
</html>

本文地址：https://blog.csdn.net/MoonNight608/article/details/107489257

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网