Flex display: Flex;Flex: 0 1 33.333%;在手机屏幕不工作

我必须制作block__item我有html和css样式的html。输出必须为:https://i.stack.imgur.com/gvpcm.png

*{
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
min-height: auto;
background-color: red;
flex-direction: column;
}

.container {
max-width: 1200px;
margin: auto;
background-color: green;
padding: 0 15px;
}
@media (max-width: 1200px) {
.container{
width: 970px;
}
}
@media (max-width: 992px) {
.container{
width: 750px;
}
}
@media (max-width: 767px) {
.container{
width: none;
}
}
.block {
margin: 0 0 30px 0;
}
.block__row {
display: flex;
margin: 0 -15px;
}
.block__column {
flex: 0 1 33.333%;
padding: 0 15px;
} 

.block__item {
background-color: aqua;
padding: 15px;
}
.block__img {
background-color: yellow;
padding: 0 0 60% 0;
margin-bottom: 10px;
}
.block__txt {
font-size: 24px;
text-align: center;
margin: 15px 15px;
}
One requirement is we must not change code inside media queries for solving this problem.
Below you can see styles for css.
Also here are css styles as snippet:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="block">
<div class="block__row">
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
=

也许flex必须是flex: 10.33.33%来解决这个问题?请帮助!

Thank You !

您可以使用flex-wrap属性来实现这一点。一旦屏幕达到手机大小，项目就会堆叠在一起。

*{
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
min-height: auto;
background-color: red;
flex-direction: column;
}

.container {
max-width: 1200px;
margin: auto;
background-color: green;
padding: 0 15px;
}
@media (max-width: 1200px) {
.container{
width: 970px;
}
}
@media (max-width: 992px) {
.container{
width: 750px;
}
}
@media (max-width: 767px) {
.container{
width: none;
}
}
.block {
margin: 0 0 30px 0;
}
.block__row {
display: flex;
margin: 0 -15px;
flex-wrap: wrap;
}
.block__column {
flex: 0 1 auto;
padding: 0 15px;
} 

.block__item {
background-color: aqua;
padding: 15px;
}
.block__img {
background-color: yellow;
padding: 0 0 60% 0;
margin-bottom: 10px;
}
.block__txt {
font-size: 24px;
text-align: center;
margin: 15px 15px;
}
One requirement is we must not change code inside media queries for solving this problem.
Below you can see styles for css.
Also here are css styles as snippet:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="block">
<div class="block__row">
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
<div class="block__column">
<div class="block__item">
<div class="block__img"></div>
<div class="block__txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni,
expedita.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, expedita.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
=

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box</title>
<style>
.three {
/* width: 100%; */
padding: 15px;
flex-basis: 100%;
background-color: blue;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.three div {
flex-basis: 30%;
text-align: center;
padding: 20px;
border: 1px solid black;
background-color: gray;
}
</style>
</head>
<body>
<section class="three">
<div class="threeFlexOne">
1
</div>
<div class="threeFlexTwo">
2
</div>
<div class="threeFlexThree">
3
</div>
</section>
</body>
</html>

你必须尝试这段代码，我有一个主div 3里面有3个子潜水和主div i应用flex和flex-wrap: wrap;它为我做的工作，所以为你!

相关内容

最新更新

热门标签：