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