我有一个显示为flex的div。在div内还有其他3个元素。我希望第一个元素的宽度为100%,第二个和第三个元素应保持彼此相邻。
示例代码: Codepen
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
.fullwidth {
background-color: yellow;
}Run Code Online (Sandbox Code Playgroud)
<div id="flex-container">
<div class="fullwidth">full swidth</div>
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" …Run Code Online (Sandbox Code Playgroud)