图像布局:
我正在尝试使用 flexbox 制作这种灵活的布局，但只想到了这个。我不知道如何在没有 position: absolute 的情况下实现它。
是否可以用
.container {
display: flex;
flex-flow: row wrap;
}
.container > * {
padding: 10px;
flex: 1 100%;
color: white;
}
.content {
order: 1;
background: green;
}
.ads {
order: 2;
background: blue;
}
.comments {
order: 3;
background: red;
}
@media all and (min-width: 940px) {
.content, .comments{
flex: 0 1 80%;
margin-right: 10px;
}
.ads {
flex: 1 0 auto;
order: 2;
}
}<html>
<head>
<title>Flex</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nisl, accumsan quis nisi sed, tempor dapibus libero. Aliquam condimentum consectetur mauris, vel eleifend est venenatis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin in felis at quam bibendum bibendum non sed tellus. Nulla efficitur tincidunt elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse euismod justo dui, non mollis nisl vulputate ut. Suspendisse vehicula sagittis orci, eget accumsan tortor pretium non. Sed finibus facilisis tortor at elementum. Curabitur tincidunt molestie ipsum vel iaculis.
Etiam ornare elit nec arcu facilisis, vel tempus ante facilisis. Pellentesque non libero ante. Nullam justo arcu, sollicitudin id malesuada ac, ultricies ac dolor. Nulla nunc felis, dignissim vel iaculis id, ultrices nec sem. Nulla fringilla lacus vitae metus porta tincidunt a id sapien. Suspendisse mollis metus non dolor consequat pellentesque. Donec rutrum odio ac sapien efficitur, at efficitur nisl dictum. Maecenas vitae arcu eget enim viverra eleifend. Mauris at dolor placerat, varius ante quis, consequat elit. Sed sodales congue bibendum. Morbi convallis eros vel nulla sagittis eleifend vel in lacus. Etiam imperdiet lorem eu turpis rutrum venenatis.
</div>
<div class="comments">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="ads">
<img src="http://demo.joomshaper.com/2012/neo/images/stories/demo/vertical-banner.jpg" />
</div>
</div>
</body>
</html>最佳答案
你不需要为此使用 flexbox，你可以只使用 float 技术。
- 让您的
.ads容器出现在标记中的主要内容之后，因为这在语义上是有意义的(您希望广告在移动设备上跟随您的内容) - 在大屏幕上让您的主要内容向左浮动，让您的广告向右浮动，并为每个内容分配一定比例的宽度:
body{
margin: 0;
}
.container{
overflow: hidden; /* One way of clearing our floated elements */
}
.content{
background-color: #349900;
}
.ads{
background-color: #0166fe;
}
.comments{
background-color: #fe0000;
}
@media screen and (min-width: 940px){
.content{
float: left;
width: 70%;
}
.ads{
float: right;
width: 30%;
}
}<div class="container">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nisl, accumsan quis nisi sed, tempor dapibus libero. Aliquam condimentum consectetur mauris, vel eleifend est venenatis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin in felis at quam bibendum bibendum non sed tellus. Nulla efficitur tincidunt elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse euismod justo dui, non mollis nisl vulputate ut. Suspendisse vehicula sagittis orci, eget accumsan tortor pretium non. Sed finibus facilisis tortor at elementum. Curabitur tincidunt molestie ipsum vel iaculis. Etiam ornare elit nec arcu facilisis, vel tempus ante facilisis. Pellentesque non libero ante. Nullam justo arcu, sollicitudin id malesuada ac, ultricies ac dolor. Nulla nunc felis, dignissim vel iaculis id, ultrices nec sem. Nulla fringilla lacus vitae metus porta tincidunt a id sapien. Suspendisse mollis metus non dolor consequat pellentesque. Donec rutrum odio ac sapien efficitur, at efficitur nisl dictum. Maecenas vitae arcu eget enim viverra eleifend. Mauris at dolor placerat, varius ante quis, consequat elit. Sed sodales congue bibendum. Morbi convallis eros vel nulla sagittis eleifend vel in lacus. Etiam imperdiet lorem eu turpis rutrum venenatis.</div>
<div class="ads">
<img src="http://demo.joomshaper.com/2012/neo/images/stories/demo/vertical-banner.jpg" />
</div>
<div class="comments">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>关于html - CSS3 Flexbox 使用特定布局的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31451554/