Detailed introduction to using css3 layout attribute flex

This article talks about using css3 layoutAttributesflex is introduced in detail

The html code is as follows:

<ul class="ul_box">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">html5</a></li>
    <li><a href="#">css3</a></li>
    <li><a href="#">jquery</a></li></ul>

css code is as follows:

.ul_box{
    margin:0;
    padding: 0;
    list-style: none;    /*display: flex将对象作为弹性伸缩盒显示;
    flex-flow:flex-direction(确定弹性子元素排列方式)和
              flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
    写入父容器里;    */
    display: flex;
    flex-flow: row wrap;
}.ul_box li{
    text-align: center;
    height:40px;
    line-height: 40px;    /*flex:flex-grow(设置弹性子元素的扩展比率)
     *        flex-shrink(设置弹性子元素的收缩比率)
     *        flex-basis(指定弹性子元素伸缩前的默认大小值，相当于width和height属性。)
     * 这三种属性的复合属性，写入子容器里;*/
    flex: 1 1 100%;
}.ul_box li a{
    text-decoration: none;
    color:#fff;
}.ul_box li:nth-child(1){
    background: #008000;
}.ul_box li:nth-child(2){
    background: #4169E1;
}.ul_box li:nth-child(3){
    background: #8A2BE2;
}.ul_box li:nth-child(4){
    background: #A52A2A;
}.ul_box li:nth-child(5){
    background: #FFA500;
}.ul_box li:nth-child(6){
    background:#9ACD32;
}@media (min-width:480px ) {
    .ul_box li{
        flex: 1 1 50%;
    }}
@media (min-width:768px ) {
    .ul_box{
        flex-flow: row nowrap;
    }}

##The following 6 properties are set on the container:

• flex-direction The arrangement direction of items in the container (default horizontal arrangement)

• flex-wrap The wrapping method of items in the container

• flex-flow The abbreviation of the above two properties

• just

  ify-content The alignment of the item on the main axis

• align-items　How items are aligned on the cross axis

• align-content　Defines the alignment of multiple axes. This property has no effect if the project has only one axis.

Properties of the items in the container:

• order　The order in which the items are sorted. The smaller the value, the higher the ranking. The default is 0.

• flex-grow The magnification ratio of the item, the default is 0<code>, that is, if there is remaining space, it will not be enlarged.

• flex-shrinkThe shrink ratio of the item, the default is 1, that is, if there is insufficient space, the item will shrink.

• flex-basis The main axis space occupied by the item before allocating excess space (main<a href="http://www.php.cn/wiki/646.html" target="_blank"> size). The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is </a>auto<code>, which is the original size of the project.

• flex is flex-grow<code>, flex-shrink and flex-basis Abbreviation, default value is 0 1 auto. The last two properties are optional.

• align-self　Allows a single item to be aligned differently from other items by overriding the align-items<code> property. The default value is auto, which means inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

The above is the detailed content of Detailed introduction to using css3 layout attribute flex. For more information, please follow other related articles on the PHP Chinese website!