flex：1应用

最新推荐文章于 2022-10-19 11:01:38 发布

lrz136

最新推荐文章于 2022-10-19 11:01:38 发布

阅读量63

点赞数

分类专栏： html css布局前端文章标签：前端 html

本文链接：https://blog.csdn.net/l13620804253/article/details/125742328

版权

前端同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

css布局

2 篇文章 0 订阅

订阅专栏

flex布局：

<div class="father">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

div.father{
    display: flex;
    background: #42b983;
    height: 50px;
}
.child1{
    width: 100px;
    display: inline-block;
    flex: none;
    background: red;
}
.child2{
    flex: 1;
    width: 0;
    background: blue;
}

div.father {
  display: flex;
  background: #42b983;
  width: 100px;
  height: 100vh;
  flex-direction: column;
}
.child1 {
  width: 100px;
  height: 20vh;
  flex: none;
  background: red;
}
.child2 {
  flex: 1;
  width: 100px;
  height: 0;
  background: blue;
}