flex多根线轴对齐方式

最新推荐文章于 2025-04-01 21:00:00 发布

原创最新推荐文章于 2025-04-01 21:00:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex多根线轴对齐方式

flex多根线轴对齐方式专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用CSS Flex布局实现的实战案例，展示了如何通过简单的HTML结构配合特定的Flex属性完成响应式网页设计。该案例中详细解释了如何设置容器及项目属性来实现不同屏幕尺寸下的良好布局效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       *{
           padding:0;
           margin:0;
       }
       /*flex里的项目是不脱离文档流的*/
       #hd{
          width:80%;
          border:4px solid orangered;
          height:700px;
          margin:20 auto;
          /*指定容器里的项目为弹性布局*/
          display: flex;
          /*放不下的项目换行*/
          flex-wrap:wrap;
          /*与交叉轴起点对齐*/
          /*align-content:flex-start;*/
          /*与交叉轴终点对齐*/
          /*align-content:flex-end;*/
          /*与交叉轴中点对齐*/
          /*align-content:center;*/
          /*与交叉轴的两端对齐，轴线之间平均分布*/
          /*align-content:space-between;*/
          /*每根轴线两端的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
          align-content:space-around;
          /*默认值，轴线占满整个交叉轴*/
          /*align-items: stretch;*/
       }
       #hd>div{
          width:240px;
          height:200px;
          background:dodgerblue;
          border:1px solid purple;
           font-size:30px;
           color:#fff;
           text-align:center;

       }
   </style>
</head>
<body>
   
   
   <div id="hd">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
   </div>
</body>
</html>