Flex佈局

時間 2019-12-11

標籤 flex 佈局欄目 Flex 简体版

原文原文鏈接

CSS 彈性盒子佈局是 CSS 的模塊之一，定義了一種針對用戶界面設計而優化的 CSS 盒子模型。在彈性佈局模型中，彈性容器的子元素能夠在任何方向上排布，也能夠「彈性伸縮」其尺寸，既能夠增長尺寸以填滿未使用的空間，也能夠收縮尺寸以免父元素溢出。子元素的水平對齊和垂直對齊都能很方便的進行操控。經過嵌套這些框（水平框在垂直框內，或垂直框在水平框內）能夠在兩個維度上構建佈局。javascript

寫了一個簡單的單頁面程序，能夠在上面進行演示以查看效果，演示地址：https://codepen.io/f_zz/pen/NmPKav。css

你也能夠複製下面的代碼在本地演示：html

<!DOCTYPE html>
<html>
<head>
    <title>Flexible Box Layout show</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        h2 {
            text-align: center;
        }
        .box {
            display: flex;
            width: 400px;
            height: 300px;
            border: 2px dotted #87a7bd;
        }
        .box > div{
            border: 2px solid #87a7bd;
            border-radius: 5%;
            background-color: rgba(96, 139, 168, .2);
        }
        #item2{
            background-color: #d4d6f3c7;
        }
        #item3{
            background-color: #e0d4dcd9;
        }
        .flexBox{
            display: flex;
            justify-content: space-around;
        }
        .left, .right{
            width: 300px;
        }
        .left > *{
            margin-left: 100px;
        }
        .item{
            display: inline;
        }
        .item input{
            width: 40px;
        }
        .boxLabel{
            color: #f32d50;
            font-style: italic;
        }
        .itemLabel{
            color: #0e67f1;
            font-style: italic;
        }
        #editor, #showing{
            display: flex;
            margin-top: 30px;
            justify-content: center;
        }
        #showing{
            margin-top: 0px;
            align-items: center;
        }
        #showing > p{
            margin-right: 10px;
            font-size: 24px;
        }
        #editor > textarea{
            width: 400px;
            height: 67px;
        }
        h2 > span{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 title="2019@fzz">Flexible Box Layout <span @click="openUrl('')">show</span></h2>
    <div class="flexBox">
        <!--left-->
        <div class="left">
            <!--boxStyle-->
            <h3>boxStyle</h3>
            <div v-for="(style, k) in boxStyle">
                <label class="boxLabel" @click="showing(k, 'boxLabel')"> {{k}} </label>
                <br>
                <select @change="doChange($event, 'boxLabel')" :name="k">
                    <option v-for="op in _data[k]"> {{op}} </option>
                </select>
            </div>
        </div>

        <!--box-->
        <div class="box" :style="boxStyle">
            <div title="doubleClicking and editing it's html" @dblclick.prevent="changeEditor" v-for="(html, id) in itemIds" :id="id" :style="_data[itemStyle[id]]" v-html="html"></div>
        </div>

        <!--left-->
        <div class="right">
            <!--itemStyle-->
            <h3>itemStyle</h3>
            <div v-for="(style, k) in item1Style">
                <label class="itemLabel" @click="showing(k, 'itemLabel')"> {{k}} </label>
                <br>
                <div v-for="(v, i) in itemStyle" class="item">
                    <label> {{i}} </label><input :name="k" :value="_data[_data.itemStyle[i]][k]" @keyup="doChange($event, 'itemLabel', _data.itemStyle[i])">
                </div>
            </div>
            </div>
        </div>

        <!--editHtml-->
        <div id="editor">
            <textarea @keyup="editHtml" spellcheck="false" v-model="editStr" placeholder="edit item's html from here!"></textarea>
        </div>

        <!--Description-->
        <div id="showing">
            <p :class="currentShowingClass">{{showingP}}</p>
            <span>{{showingContent}}</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        info: 'Flexible Box爲css提供的基於盒子模型的彈性佈局',
        boxStyle: {
            flexDirection: 'row',
            flexWrap: 'nowrap',
            justifyContent: 'flex-start',
            alignItems: 'flex-strat',
            alignContent: 'flex-strat',
        },
        flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
        flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
        justifyContent: ['flex-strat', 'flex-end', 'center', 'space-between', 'space-around'],
        alignItems: ['flex-strat', 'flex-end', 'center', 'baseline', 'stretch'],
        alignContent: ['flex-strat', 'flex-end', 'center', 'space-around', 'space-between', 'stretch'],
        flexFlow: ['row', 'nowrap'],
        itemIds: {
            item1: 'item1',
            item2: 'item2222222',
            item3: 'item<br>333'
        },
        itemStyle: {
            item1: 'item1Style',
            item2: 'item2Style',
            item3: 'item3Style' 
        },
        item1Style: {
            order: 0,
            flexGrow: 0,
            flexShrink: 0,
            flexBasis: 'auto',
            alignSelf: 'auto'
        },
        item2Style: {
            order: 0,
            flexGrow: 0,
            flexShrink: 0,
            flexBasis: 'auto',
            alignSelf: 'auto'
        },
        item3Style: {
            order: 0,
            flexGrow: 0,
            flexShrink: 0,
            flexBasis: 'auto',
            alignSelf: 'auto'
        },
        alignSelf: ['auto', 'flex-strat', 'flex-end', 'center', 'baseline', 'stretch'],
        flex: [0, 1, 'auto'],
        editStr: '',
        editorId: 'item1',
        currentShowingClass: '',
        showingP: '',
        showingContent: '',
        showings: {
            Flex: '是Flexible Box的縮寫，意爲」彈性佈局」，用來爲盒狀模型提供最大的靈活性。任何一個容器均可以指定爲Flex佈局。',
            flexDirection: '屬性決定主軸的方向（即項目的排列方向）。row（默認值）：主軸爲水平方向，起點在左端。row-reverse：主軸爲水平方向，起點在右端。column：主軸爲垂直方向，起點在上沿。column-reverse：主軸爲垂直方向，起點在下沿。',
            flexWrap: '屬性默認狀況下，項目都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。nowrap（默認）：不換行。wrap：換行，第一行在上方。wrap-reverse：換行，第一行在下方。',
            justifyContent: '屬性定義了項目在主軸上的對齊方式。flex-start（默認值）：左對齊；flex-end：右對齊；center： 居中；space-between：兩端對齊，項目之間的間隔都相等；space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。',
            alignItems: '屬性定義項目在交叉軸上如何對齊。flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基線對齊。stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。',
            alignContent: '屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線佔滿整個交叉軸。',
            order: '屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0',
            flexGrow: '屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。',
            flexShrink: '屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。負值對該屬性無效。',
            flexBasis: '屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。',
            alignSelf: '屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。',
        },
    },
    created(){
        this.showingP = 'Flex';
        this.showingContent = this.showings.Flex;
    },
    methods: {
        doChange: function(e, showClass, item){
            var target = e.target;
            if(!target){
                return;
            }
            var name = target.name,
                value = target.value;
            if(this.boxStyle.hasOwnProperty(name)){
                this.boxStyle[name] = value;
            }else if(this[item] && this[item] && this[item].hasOwnProperty(name)){
                this[item][name] = value;
            }
            this.showing(e.target.name, showClass);
        },
        changeEditor: function(e){
            this.editorId = e.target.id;
            this.editStr = this.itemIds[this.editorId];
        },
        editHtml: function(e){
            this.itemIds[this.editorId] = this.editStr;
        },
        showing(name, showClass){
            name = name || 'Flex';
            this.showingP = name;
            this.showingContent = this.showings[name];
            this.currentShowingClass = showClass || '';
        },
        openUrl: function(url){
            url = url || 'http://www.cnblogs.com/fzz9/';
            window.open(url, '_blank')
        }
    }
});
</script>
</html>

參考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout
http://www.runoob.com/w3cnote/flex-grammar.htmlvue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。