Heim > Web-Frontend > CSS-Tutorial > Detaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-Flex

Detaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-Flex

高洛峰
Freigeben: 2017-03-16 09:42:57
Original
1733 Leute haben es durchsucht

Dieser Artikel beschreibt die Verwendung von CSS3-LayoutAttributenFlex im Detail

Der HTML-Code lautet wie folgt:


<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>
Nach dem Login kopieren


Der CSS-Code lautet wie folgt:


.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;
    }}
Nach dem Login kopieren


Die folgenden 6 Eigenschaften sind Auf dem Behälter festlegen:

  • flex-direction Die Anordnungsrichtung der Gegenstände im Behälter (standardmäßige horizontale Anordnung)

  • flex-wrap Die Verpackung Methode der Elemente im Container

  • Flex-Flow Die Abkürzung der oben genannten beiden Eigenschaften

  • nurwenny- content Die Ausrichtung des Elements auf der Hauptachse

  • align-items  Wie Elemente auf der Querachse ausgerichtet werden

  • align-content  Definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.

Eigenschaften von Artikeln im Container:

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

  • flex-grow  项目的放大比例,默认为<code>0, Das heißt, wenn noch Platz vorhanden ist, wird dieser nicht vergrößert.

  • flex-shrink Das Schrumpfverhältnis des Elements, der Standardwert ist 1, dh wenn nicht genügend Platz vorhanden ist, wird das Element verkleinert. <code>flex-shrink  项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

  • flex-basis Der Hauptachsenraum, der vom Element eingenommen wird, bevor überschüssiger Platz zugewiesen wird (<a href="//m.sbmmt.com/wiki%20/%20646.html" target="_blank">Hauptgröße<code>flex-basis  在分配多余空间之前,项目占据的主轴空间(<a href="//m.sbmmt.com/wiki/646.html" target="_blank">main</a> size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为<code>auto). Der Browser verwendet dieses Attribut, um zu berechnen, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist auto, was der Originalgröße des Projekts entspricht.

  • flex  是<code>flex-growflex ist die Version von <code>flex-grow<code>flex-shrink, flex-shrink<code>flex-basis und flex-basis<code>0 1 auto Abkürzung, der Standardwert ist 0 1 auto. Die letzten beiden Eigenschaften sind optional.

  • align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖<code>align-itemsalign-self  Ermöglicht einem einzelnen Element eine andere Ausrichtung als andere Elemente, indem das Attribut <code>align-items<code>auto überschrieben wird. Der Standardwert ist auto<a href="//m.sbmmt.com/code/6064.html" target="_blank">, was bedeutet, dass </a> das Attribut <code>align-items<code>align-items des übergeordneten Elements stretch erbt. Wenn kein übergeordnetes Element vorhanden ist, entspricht es stretch.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-Flex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage