英文:
Width ratio for divs/columns in a flex box
问题
我有一个使用flexbox创建的响应式模板，其中包含一个图片列（div/column）和一个文本列（div/column）。当两列的宽度都为50%时，一切正常。但现在我想将图片的宽度设为60%，文本的宽度设为40%。我的问题是，当我在.container .columns的CSS部分中移除flex: 0 0 auto; width: 50%;，然后尝试将.columns.image的宽度设为60%，.columns.content的宽度设为40%时，会在媒体查询中出现问题。
我尝试过应用不同的flex比例并编辑媒体查询，但没有成功。我更喜欢保持flexbox而不改为grid。如果有人有解决方案，我将非常感激。
英文:
I have a responsive template made with a flex box containing a picture div/column and a text div/column. When the width is 50% for both columns, its working fine. But now i want the picture width to be 60% and the text width to be 40%. My problem is when i remove the flex:0 0 auto; width: 50%; in the .container .columns css section and try to give the .columns.image a width of 60% and the .columns.content a width of 40% it creates problems with the media query.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");
@import url("https://use.typekit.net/yoj6eqg.css");
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
.container {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin: 5% 15% 5% 15%;
}
.container .columns {
flex: 0 0 auto;
width: 50%;
}
.container .columns.image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container .columns.content .content-container {
padding: 40px 50px;
background-color: #e6e6e6;
}
.container .columns.content .content-container h1 {
font-weight: 700;
font-size: 35px;
color: #86b530;
margin-bottom: 20px;
font-family: "p22-underground", sans-serif;
font-weight: 600;
font-style: strong;
}
.container .columns.content .content-container p {
font-weight: 400;
font-size: 16px;
color: #333333;
margin-bottom: 20px;
margin-bottom: 15px;
text-align: justify;
font-family: "Assistant", sans-serif;
}
@media screen and (max-width: 767px) {
.container {
flex-flow: row wrap;
}
.container .columns.image {
display: block;
order: 1;
width: 100%;
height: 250px;
}
.container .columns.content {
display: block;
order: 2;
width: 100%;
}
.container .columns.content .content-container {
padding: 20px 35px;
}
.container .columns.content .content-container h1 {
margin-bottom: 5px;
}
}
<!-- language: lang-html -->
<div class="container">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="columns image">
</div>
<div class="columns content">
<div class="content-container">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud.</p>
</div>
</div>
</div>
<!-- end snippet -->
I tried to apply the different flex ratios and edited the media query, but to no success. I would prefer to keep the flex box instead of changing to a grid. If anyone has a solution, i would be very thankful.
答案1
得分: 0
对于在父级`.container`内部的等宽（`50%`）列空间分配，您使用了以下代码：
```css
.container .columns {
flex: 0 0 auto;
width: 50%;
}
由于两列的宽度相等，这就足够了。然而，对于不均匀的分配（60% vs. 40%），您需要为每列定义它们获得多少父级空间：
.container .columns { flex: 0 0 auto }
.container .columns.image { width: 60% }
.container .columns.content { width: 40% }
在较小的设备上（<960px），容器.columns.content可能会显得有点太窄，但这是另一个问题要解决。也许可以使用另一个@media查询，并保持原始的50%分配...
<details>
<summary>英文:</summary>
For the equal (`50%`) column space distribution inside parent `.container` you used:
```css
.container .columns {
flex: 0 0 auto;
width: 50%;
}
This was sufficient CSS as both columns were equally wide. However, for uneven distribution (60% vs. 40%) you will have to define per column how much parent space it gets:
.container .columns { flex: 0 0 auto }
.container .columns.image { width: 60% }
.container .columns.content { width: 40% }
On smaller devices (<960px) container .columns.content now gets a bit too narrow to my taste, but that's another problem to solve. Maybe another @media with your original 50% distribution...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论