首页 / CSS / css flex经典三大布局：垂直居中，两列等高，自适应宽

css flex经典三大布局：垂直居中，两列等高，自适应宽

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css flex经典三大布局：垂直居中，两列等高，自适应宽，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1264字，纯文字阅读大概需要2分钟。

内容图文

用flex实现css里的三大经典布局，不需要额外很多代码。

1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。
                <
                div 
                id
                ="parent"
                >
                <
                div 
                id
                ="child"
                ></
                div
                >
                </
                div
                >
            
                #parent {
/* align-content和align-items必须配合使用 */
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      outline: solid 1px;
    }
    #child {
      width: 100px;
      height: 100px;
      outline: solid 1px;
    }

 

2，二列等高：父元素里有二个子元素，一个设置高度，另一个需要和它高度一致。
                    <
                    div 
                    id
                    ="parent"
                    >
                    <
                    div 
                    id
                    ="child"
                     style
                    ="height: 300px;"
                    ></
                    div
                    >
                    <
                    div 
                    id
                    ="child"
                    ></
                    div
                    >
                    </
                    div
                    >
                
                    #parent {
      display: flex;
      justify-content: center;
      align-content: center;
/*  stretch让盒子内的每个元素的高度都等于行高 */
      align-items: stretch; 
      width: 300px;
    }
    #child {
      width: 100px;
      outline: solid 1px;
    }

 

3，自适应宽：父元素里有二个子元素，一个设置宽度，另外一个占据剩余的宽度。
                <
                div 
                id
                ="parent"
                >
                <
                div 
                id
                ="child1"
                ></
                div
                >
                <
                div 
                id
                ="child2"
                ></
                div
                >
                </
                div
                >
            
                #parent {
      display: flex;
      width: 300px;
      height: 200px;
      background-color: pink;
    }
    #child1 {
      flex: 1;
      /* 即使设置100px宽，还是会占据剩余的所有宽度 */
      width: 100px;  
      background-color: lightblue;
    }
    #child2 {
      width: 100px;
      outline: solid 1px;
    }

 

原文：https://www.cnblogs.com/easonw/p/10756507.html

内容总结

以上是互联网集市为您收集整理的css flex经典三大布局：垂直居中，两列等高，自适应宽全部内容，希望文章能够帮你解决css flex经典三大布局：垂直居中，两列等高，自适应宽所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1215203.html

来源：【匿名】