flex多根线轴对齐方式

最新推荐文章于 2024-06-12 16:48:27 发布

盏茶作酒

最新推荐文章于 2024-06-12 16:48:27 发布

阅读量1.5k

点赞数

分类专栏： flex多根线轴对齐方式文章标签： flex多根线轴对齐方式

本文链接：https://blog.csdn.net/qq_40999917/article/details/79932297

版权

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

1 篇文章 0 订阅

订阅专栏

<!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>

盏茶作酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex多根线轴对齐方式

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding:0;
复制链接

扫一扫