flexbox 的相关属性的运用

若是用 JS 动态的添加 html 元素到有 flexbox 属性的元素上，那么渲染的时候可能会有问题。

CSS 代码如下:

.display-flex {

  /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */

  display: -webkit-box;

  /* OLD: Firefox (buggy) */

  display: -moz-box;

  /* MID: IE 10 */

  display: -ms-flexbox;

  /* NEW, Chrome 21–28, Safari 6.1+ */

  display: -webkit-flex;

  /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

  display: flex;

}

/*

  里面的直接子元素相对于外层容器 水平居中,

  就可以不用table 让未知宽度的元素水平居中了

*/

.display-flex.justify-content-center {

  -webkit-box-pack: center;

  -moz-box-pack: center;

  -ms-flex-pack: center;

  -webkit-justify-content: center;

  justify-content: center;

}

/*

    里面的直接子元素相对于外层容器 垂直居中

*/

.display-flex.align-items-center {

  -webkit-box-align: center;

  -moz-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

}

/* 设置column 为竖向排列, 默认属性是row 横向排列 */

.display-flex.flex-direction-column {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  -webkit-flex-direction: column;

  flex-direction: column;

}

/*让子元素都有相同的长度*/

.display-flex .flex1{

  -webkit-box-flex:;

  -moz-box-flex:;

  -ms-box-flex:;

  -ms-neg-flex:;

  -webkit-flex:;

  -ms-flex:;

  flex:;

}

.div-box{

  height: 200px;

  border:1px solid red;

}

.div1{

  height: 100px;

  background-color:red;

}

HTML 的代码

例子1:

<!-- 什么都不加 -->

<div class='div-box'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

例子2:

<!-- 只加 display-flex -->

<div class='div-box display-flex'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

例子3:

<!-- 加 display-flex 和 flex1 -->

<div class='div-box display-flex'>

    <div class='div1 flex1'>aaaa</div>

    <div class='div2 flex1'>bbbb</div>

</div>

例子4:

注意这个时候不要加 flex1, 否则居中看上去就不起作用了, 因为它们两个各占一半的宽度。

<!-- 加 display-flex 和 justify-content-center -->

<div class='div-box display-flex justify-content-center'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

例子5:

<!-- 加 display-flex 和 align-items-center -->

<div class='div-box display-flex align-items-center'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

例子6:

<!-- 加 display-flex 和 align-items-center 和 flex1 -->

<div class='div-box display-flex align-items-center'>

    <div class='div1 flex1'>aaaa</div>

    <div class='div2 flex1'>bbbb</div>

</div>

例子7:

<!-- 加 display-flex 和 align-items-center 和 justify-content-center -->

<div class='div-box display-flex align-items-center justify-content-center'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

例子8:

<!-- 加 display-flex 和 align-items-center 和 justify-content-center 和 flex-direction-column -->

<div class='div-box display-flex align-items-center justify-content-center flex-direction-column'>

    <div class='div1'>aaaa</div>

    <div class='div2'>bbbb</div>

</div>

参考地址: https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/

附几张兼容性属性的截图:

巴特西

flexbox 的相关属性的运用

最新文章

热门文章