In diesem Artikel erfahren Sie, wie Sie mehrere mehrspaltige Layouts mithilfe von Flex in CSS3 implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
.container{
display: flex;
width: 500px;
height: 200px;
}
.left{
flex:1;
background: red;
}
.middle{
flex:1;
background: green;
}
.right{
flex:1;
background: blue;
}
<p>
</p><p></p>
<p></p>
<p></p>
.container{
display: flex;
height: 300px;
}
.left{
flex: 0 0 100px;
background-color: red;
}
.middle{
flex: 0 0 100px;
background-color: green;
}
.right{
flex:1;
background-color: blue;
}
<p>
</p><p>qqq</p>
<p>qqq</p>
<p>wwww</p>
Nach dem Verkleinern des Browserfensters
## Links und rechts fixiert, Mitte adaptiv##
.container{
display: flex;
height: 300px;
}
.left{
width: 100px;
background-color: red;
}
.middle{
flex: 1;
background-color: green;
}
.right{
width: 100px;
background-color: blue;
}
<p>
</p><p>qqq</p>
<p>qqq</p>
<p>wwww</p>
Nach dem Verkleinern des Browserfensters
.container{
display: flex;
height: 300px;
width: 300px;
flex-direction: column;
}
.row{
display: flex;
height: 100px;
}
.left{
flex: 1;
height: 100px;
border: 1px solid red;
}
.middle{
flex: 1;
height: 100px;
border: 1px solid green;
}
.right{
flex: 1;
height: 100px;
border: 1px solid blue;
}
<p>
</p><p>
</p><p></p>
<p></p>
<p></p>
<p>
</p><p></p>
<p></p>
<p></p>
<p>
</p><p></p>
<p></p>
<p></p>
*{
margin:0;
padding:0;
}
.container{
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
}
.header{
background: red;
flex: 0 0 100px;
}
.content{
display: flex;
flex:1;
}
.content-left{
flex: 0 0 100px;
background: green;
}
.content-right{
flex: 0 0 100px;
background: pink;
}
.content-middle{
flex:1;
}
.footer{
background: yellow;
flex: 0 0 100px;
}
<p>
</p><p>Header</p>
<p>
</p><p>Left</p>
<p>Center</p>
<p>Right</p>
<p>Footer</p>
Nach dem Verkleinern des Browserfensters
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte Tutorials finden Sie hier. Bitte besuchen Sie CSS-Grundlagen-Video-Tutorial, CSS3-Video-Tutorial, Bootstrap-Video-Tutorial!
Das obige ist der detaillierte Inhalt vonCSS3 Learning Flex implementiert mehrere mehrspaltige Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
