Introduction détaillée à l'utilisation de l'attribut de mise en page CSS3 Flex

Cet article décrit l'utilisation de la mise en page CSS3attributsflex en détail

Le code html est le suivant :

<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>

Le code CSS est le suivant :

.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;
    }}

Les 6 propriétés suivantes sont défini sur le conteneur :

• flex-direction La direction de disposition des articles dans le conteneur (disposition horizontale par défaut)

• flex-wrap L'emballage méthode des éléments dans le conteneur

• flex-flow　L'abréviation des deux propriétés ci-dessus

• justify- content　L'alignement de l'élément sur l'axe principal

• align-items　 Comment les éléments sont alignés sur l'axe transversal

• align-content　 Définit le alignement de plusieurs axes. Cette propriété n'a aucun effet si le projet ne comporte qu'un seul axe.

Propriétés des éléments dans le conteneur :

• order　　项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow　　项目的放大比例，默认为<code>0, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi.

• flex-shrink Le taux de rétrécissement de l'article, la valeur par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'article rétrécira. <code>flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

• flex-basis L'espace de l'axe principal occupé par l'élément avant d'allouer l'espace excédentaire (<a href="http://www.php.cn/wiki%20/%20646.html" target="_blank">main<code>flex-basis　　在分配多余空间之前，项目占据的主轴空间（<a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为<code>auto taille). Le navigateur utilise cet attribut pour calculer s'il y a de l'espace supplémentaire sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille originale du projet.

• flex　　是<code>flex-growflex est la version de <code>flex-grow<code>flex-shrink, flex-shrink<code>flex-basis et flex-basis<code>0 1 auto Abréviation, la valeur par défaut est 0 1 auto. Les deux dernières propriétés sont facultatives.

• align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖<code>align-itemsalign-self　 Permet à un seul élément d'avoir un alignement différent de celui des autres éléments en remplaçant l'attribut <code>align-items<code>auto. La valeur par défaut est auto<a href="http://www.php.cn/code/6064.html" target="_blank">, ce qui signifie que </a> hérite de l'attribut <code>align-items<code>align-items de l'élément parent stretch S'il n'y a pas d'élément parent, cela équivaut à <. code>étirement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!