Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Verwendung von CSS3-Layout-Attribut-Flex
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>
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; }}
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="http://www.php.cn/wiki%20/%20646.html" target="_blank">Hauptgröße<code>flex-basis 在分配多余空间之前,项目占据的主轴空间(<a href="http://www.php.cn/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-grow
flex 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-items
align-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="http://www.php.cn/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!