css-flex常見面試題

ZweiZhao 發布于2019-08-30 15:55 / 2997人閱讀

摘要：廢話不多說內容寬度等分左右布局，一側定寬，一側自適應撐滿固定寬度自適應寬度未知高寬上下左右居中未知高度上下左右居中這個效果就不展示了，可以做到未知寬高，和已知寬未知高的居中效果。

廢話不多說！

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常見面試題見面初次見面常數據成員

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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