快速学习flex布局

最新推荐文章于 2025-05-09 19:17:55 发布

codetimev

最新推荐文章于 2025-05-09 19:17:55 发布

阅读量112

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_44017091/article/details/124003726

版权

本文深入探讨了Flex布局，包括其主要属性如flex-direction、justify-content和align-items，以及如何影响子元素的属性如flex-grow、flex-shrink和align-self。通过示例代码展示了如何在网页中实现灵活的响应式布局，帮助读者理解和应用Flex布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父元素的属性
display: flex;

flex-direction
修改主轴的方向
flex-wrap
元素是否换行
justify-content
主轴上的分布方式
align-items
交叉轴上的分布方式
用于子元素的属性
flex-grow
是否利用剩余空间
flex-shrink
父元素过小，是否挤压自己的空间
flex-basis
用于指定的起始宽度
flex
将上面三个元素（flex-grow flex-shrink flex-basis）缩写
align-self
覆盖在交叉轴的布局方式
order
对应元素的排序方式

<!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>
       .wrap{
           height: 800px;
           border: 20px solid antiquewhite;
           display: flex;
           /* 需要在父容器加次属性 */
           /* flex-direction: column;   */
           /*改变主轴方向 */
           /* justify-content: center; */
           /*   居中*/
           /* justify-content: flex-start; */
           /* 从左往右 */
           /* justify-content: space-between; */
           /* 自动调整 */
           /* justify-content: space-around; */
           /* 把每个元素分配从左边的空间 */
           /* justify-content: space-evenly; */
           /* 每个元素均匀分配空间 */
           /* align-items: center; */
           /* 交叉轴方向控制排列方式 */
           /* flex-wrap: wrap; */
           /* 动态调整盒子 */
          

       }
       .box-1{
           background: yellowgreen;
           /* flex；1 */
           /* 均匀分割 */
           /* flex-shrink: 0; */
           /* 不允许被压缩 */
           /* align-self: flex-start; */
           /* align-self: flex-end; */
           /* 交叉轴覆盖 */
           /* order: 1; */
           /* 调整在主轴的顺序 */
       }
       .box-2{
           background: darkcyan;
       }
       .box-3{
           background: slateblue;
       }
       .box{
           height: 200px;
           width: 200px;
           color: white;
           font-size: 40px;
       }
   </style>
</head>
<body>
   <div class="wrap">
       <div class="box box-1"></div>
       <div class="box box-2"></div>
       <div class="box box-3"></div>
   </div>
</body>
</html>