css 一列固定一列自适应布局-flex布局实现

最新推荐文章于 2024-02-26 17:29:47 发布

林夕_______

最新推荐文章于 2024-02-26 17:29:47 发布

阅读量3.6k

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/jinyt_/article/details/77234227

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

flex布局，弹性盒子布局。

声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items.

常结合使用的属性有 dispaly:flex; flex-flow:row; 伸缩项目单行排列

或者flex-flow:column; 伸缩项目单列排列

这里利用flex布局实现一列固定，一列自适应

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>flex/calc</title>
   <style>
      .box{
         width:500px;
         height:100px;
         line-height: 100px;
         border:1px solid #ddd;
         color:#fff;
         font-size: 20px;
         text-align: center;

         /*父元素添加flex布局*/
         display: flex;/*设为伸缩容器*/
         flex-flow: row;/*伸缩项目单行排列*/
      }
      .box .child{
         /*固定宽度*/
         width:100px;
         height:100px;
         background: #ff76bc;
         float: left;
      }
      .box .son{
         height:100px;
         background: #00c13f;
         /*这里设置为占比1，填充满剩余空间*/
         flex: 1;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="child">固定宽度</div>
      <div class="son">自由缩放</div>
   </div>
</body>
</html>

林夕_______

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 一列固定一列自适应布局-flex布局实现

flex布局，弹性盒子布局。声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items.常结合使用的属性有 dispaly:flex; flex-flow:row; 伸缩项目单行排列或者flex-flow:column; 伸缩项目单列排列这里利用flex布局实现一列固定，一列自适应html>lang="zh">
复制链接

扫一扫