Flex案例——垂直居中、导航栏、圣杯布局等

最新推荐文章于 2023-12-06 16:51:59 发布

猫与故巷0214

最新推荐文章于 2023-12-06 16:51:59 发布

阅读量2.6k

点赞数 2

文章标签：前端 flex flexbox css css3

本文链接：https://blog.csdn.net/qq_44827845/article/details/117264473

版权

本文介绍了Flex布局在前端开发中的应用，包括如何使用Flex实现元素垂直居中、创建导航栏、固定百分比布局、圣杯布局以及将div固定在页面底部。详细探讨了justify-content、align-items属性以及flex-basis的作用。

摘要由CSDN通过智能技术生成

Flex案例

一、案例

一、案例

1.弹性容器案例

<style>
	.son {
     
            width: 60px;
            height: 60px;
            border: 1px solid red;
            margin: 5px;
            box-sizing: border-box;
            background-color: blanchedalmond;
       }
     .flex-direction,.align-content,.align-items, .flex-wrap,.flex-flow,.justify-content{
     
		    width: 600px;
		    display: flex;
		    background-color: gray;
		    margin: 10px auto;
	   }
     .flex-direction {
     
            flex-direction: row;
       }
     .flex-wrap {
     
            flex-wrap: nowrap;
       }
      .flex-flow {
     
            flex-flow: row wrap-reverse;
       }
      .justify-content {
     
            height: 100px;
            justify-content: space-around;
       }
      .align-items {
     
            height: 100px;
            flex-flow: row wrap;
            align-items: baseline;
       }
      .align-content {
     
            height: 300px;
            flex-flow: row wrap;
 			align-content: stretch;
 	   }     
</style>
<body>
    <!-- flex-direction -->
    <div class="flex-direction">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>
    <!--省略其他div-->
 </body>

在这里插入图片描述

2.弹性元素案例

<style>
.son {
     
     width: 60px;
     height: 60px;
     border: 1px solid red;
     margin: 5px;
     box-sizing: border-box;
     background-color: blanchedalmond;
     }
.order,.flex-grow,.flex-shrink,.flex-basis,.flex,.align-self {
     
    width: 600px;
    height: 100px;
    display: flex;
    margin: 10px auto;
    background-color: g