css-flex常见面试题

ZweiZhao 发布于2019-08-30 15:55 / 2980人阅读

摘要：废话不多说内容宽度等分左右布局，一侧定宽，一侧自适应撑满固定宽度自适应宽度未知高宽上下左右居中未知高度上下左右居中这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。

废话不多说！

flex-内容宽度等分

//css
       .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
    
        1
        2
        3

左右布局，一侧定宽，一侧自适应撑满

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
        }
        
        .left,
        .right {
            height: 100%;
            border: 1px solid red;
            box-sizing: border-box;
        }
        
        .left {
            width: 300px;
        }
        
        .right {
            width: 100%;
        }

//html
    
        固定宽度300px
        自适应宽度

未知高宽上下左右居中

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center
        }
        
        .box {
            width: 300px;
            border: 1px solid red;
        }
    
    //html
     
        未知高度上下左右居中

这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。

云服务器 GPU云服务器 js常见面试题见面初次见面常数据成员

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117343.html

css-flex常见面试题

摘要：废话不多说内容宽度等分左右布局，一侧定宽，一侧自适应撑满固定宽度自适应宽度未知高宽上下左右居中未知高度上下左右居中这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。废话不多说！ flex-内容宽度等分 //css .box { display: flex; } .box div { ...

Godtoy 2019-08-02 14:12 评论0 收藏0
常见面试题—css实现垂直水平居中

摘要：常见面试题实现垂直水平居中前言面试中常常被问到，如何使用来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。常见面试题—css实现垂直水平居中前言面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常...

gougoujiang 2019-08-29 15:40 评论0 收藏0
前端常见面试题总结

摘要：个人总结的一些常见面试题欢迎各位同时非常欢迎贡献问题一起来完善不定期更新常见前端面试题总结个人总结的一些常见面试题,欢迎各位star,issues,同时非常欢迎贡献问题!一起来完善.不定期更新常见前端面试题总结

ingood 2019-08-26 13:36 评论0 收藏0
前端常见面试题（实战遇到）

摘要：浏览器内核常用的块元素和内联元素数据类型语句前端优化方法会话跟踪方法和区别循环输出网站优化清除浮动方法，优缺点和区别截取长文本写方法截取字符串响应式布局浏览器兼容正则表达式验证身份证源码自己如何封装一个固定一个按钮在右下角画一个三角形同步和 1、浏览器内核2、常用的块元素和内联元素3、数据类型 *4、SQL语句5、前端优化方法 *6、会话跟踪方法 *7、display ： none 和...

时飞 2019-08-23 16:13 评论0 收藏0