首頁(yè) 猿問(wèn) Flexbox...

Flexbox 前端設(shè)計(jì)要求容器左側(cè)，但右側(cè)拉伸全寬

Html5

富國(guó)滬深 2023-10-30 15:51:47

我正在嘗試做一個(gè)簡(jiǎn)單的網(wǎng)站，其設(shè)計(jì)很棒，但令我困惑。這個(gè) codepen 總結(jié)了我正在嘗試做的事情。我需要編寫(xiě)一個(gè)位于普通 1200px 容器頂部的英雄橫幅。左側(cè)需要一個(gè) 400px 寬的容器，與其下方的 400px 容器平行。紅色容器需要與下面的紫色容器對(duì)齊，但右側(cè)需要拉伸到末端。對(duì)我來(lái)說(shuō)，最困難的事情是它需要響應(yīng)。我已經(jīng)嘗試了我能想到的所有 Flex 版本，但都沒(méi)有結(jié)果。如何才能實(shí)現(xiàn)這一目標(biāo)？我只需要使用 CSS 和 HTML 來(lái)完成此操作，不需要 JavaScript。代碼筆鏈接是https://codepen.io/hundredbillion/pen/jOPRdgr我的代碼如下? ? <div class="text-image-banner">? ? ? <div class="text-flex">? ? ? ? <div class="text-content">? ? ? ? ? <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange bar below for all screen widths</h5>? ? ? ? </div>? ? ? </div>? ? ? <div class="img-flex">? ? ? ? <div class="img">? ? ? ? ? <p>This needs to stretch all the way to the right, but the left edge of the red bar must match the left edge of the purple bar for all screen widths. An image will go here</p>? ? ? ? </div>? ? ? </div>??? ? </div>? ? <div class="container">? ? ? <p class="center">this is a 1200px container</p>? ? ? <div class="flex">? ? ? ? ?<p class="four">text container</p>? ? ? ? <p class="eight">img container</p>? ? ? </div>? ? </div>和我的CSS? ? .text-image-banner {? ? ? display: flex;? ? ? margin-left:auto;? ? ? margin-right:auto;? ? }? ? .text-flex {? ? ? background: blue;? ? ? display:flex;? ? ? justify-content:flex-end;? ? ? flex: 1;? ? }? ? .text-content{? ? ? background: yellow;? ? ? display:flex;? ? ? width:400px;? ? }? ? .img-flex{? ? ? background: red;? ? ? flex-basis: 1030px;? ? }? ? /*---- this is a plain vanilla hero banner ----*/? ? .container{? ? ? max-width:1200px;? ? ? margin-left:auto;? ? ? margin-right:auto;? ? ? background:pink;? ? }? ? .four{? ? ? background:orange;? ? ? text-align:center;? ? ? width:400px;? ? ? height:200px;? ? }? ? .eight{? ? ? background:purple;? ? ? text-align:center;? ? ? color:white;? ? ? width:800px;? ? }? ? .flex{? ? ? display:flex;? ? }? ? .center{? ? ? text-align:center;? ? }

查看完整描述

2 回答

人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

所以事實(shí)證明，使用 css grid-template-areas 可以讓我得到我想要的東西。這是一種可能的解決方案。愿它能幫助其他遇到同樣問(wèn)題的人。

<!DOCTYPE html>

<html>

<head>

<title>title</title>

<style>

*{

overflow: hidden;

}

.container {

display: grid;

grid-template-columns: auto 400px 800px auto;

grid-template-areas: ". header-text header-image header-image"

". body-text body-image. ";

background-color: #2B3D41;

}

.header-text {

grid-area: header-text;

background-color: #F9B9F2;

}

.header-image {

grid-area: header-image;

background-color: #BCA0BC;

}

.body-text {

grid-area: body-text;

background-color: #4C5F6B;

}

.body-image {

grid-area: body-image;

background-color: #83A0A0;

}

@media screen and (max-width: 1200px) {

.container {

grid-template-columns: 33.3% 66.6%;

grid-template-areas: "header-text header-image"

"body-text body-image";

}

@media screen and (max-width: 768px) {

.container {

display: block;

}

</style>

</head>

<body>

<h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange div

below for all screen widths. </h5>

</div>

<p>This needs to stretch all.An image will go here</p>

</div>

<p class="body-text">text container</p>

<p class="body-image">img container</p>

</div>

</body>

</html>

反對(duì) 回復(fù) 2023-10-30

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

我建議你使用 css grid 來(lái)代替純 Flex。我將提供一個(gè)例子

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: 400px 1fr;

grid-template-rows: auto;

background-color: #fff;

color: #444;

}

.eight {

background: purple;

text-align: center;

color: white;

width: 800px;

}

.footer {

grid-column: span 2;

}

.box {

background-color: #444;

color: #fff;

border-radius: 5px;

padding: 10px;

font-size: 150%;

}

.header,

.footer {

background-color: #999;

}

<div class="box sidebar">right</div>

<div class="text-container">Content

<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac porta sapien. Maecenas lacus erat, suscipit bibendum bibendum ut, scelerisque vehicula nisl. Integer eget lorem non ex laoreet pellentesque. Aenean pulvinar rhoncus fermentum.

Nunc sit amet suscipit nibh. Pellentesque ullamcorper neque eget dui iaculis lobortis quis nec diam. Nulla in bibendum enim. Ut elementum nunc risus, bibendum semper turpis ornare eget. In et vulputate mauris. Cras eu velit et ipsum tempor congue

at sit amet odio. Aenean at urna vitae urna rutrum pretium eu id odio. Curabitur suscipit libero in lobortis finibus. Proin libero nunc, venenatis ultricies dapibus ac, accumsan quis lacus. Pellentesque eleifend velit ac finibus tristique. Praesent

dapibus, erat dignissim cursus aliquam, dui velit auctor turpis, sed maximus est nisl in eros. Sed et eros in nibh vulputate imperdiet. Phasellus dignissim feugiat odio, et volutpat ante vestibulum non. Cras venenatis urna quis felis lacinia imperdiet.

Quisque convallis lacus at nulla mollis, quis porttitor arcu scelerisque. Proin neque arcu, rutrum mollis egestas vel, malesuada vitae massa. Cras fringilla, quam ut suscipit lacinia, dolor tortor porta urna, id accumsan dolor dui vel ligula. Donec

sollicitudin consequat dapibus. Nulla eget fringilla leo. Curabitur a lacus id odio varius mollis eu eget risus. Aliquam mauris mi, pulvinar ut justo ut, accumsan euismod augue. Quisque non faucibus arcu. Proin neque ante, aliquet nec mi vel, fringilla

cursus nisi. Sed egestas sollicitudin ligula, vel auctor metus dictum vitae. Vivamus eget nisl malesuada, egestas neque placerat, vestibulum nisi. Curabitur aliquam metus sit amet velit vestibulum posuere. Suspendisse augue eros, pulvinar quis ante

vitae, ultrices placerat dui. Aenean vehicula accumsan arcu id dapibus. Phasellus fermentum massa euismod auctor tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam orci ligula, suscipit a mi in,

blandit sodales purus. Vivamus a feugiat leo. Cras eu tellus laoreet, luctus erat sit amet, convallis tellus. Vivamus scelerisque purus at nisl convallis pharetra. Nam consectetur, nisl quis interdum porttitor, magna ipsum facilisis quam, ut euismod

ligula dui sit amet nulla. Donec massa eros, iaculis sed dui pellentesque, fermentum malesuada nulla. In consequat eu ipsum non convallis. Morbi dapibus accumsan risus eu efficitur. Vivamus dolor velit, congue eget felis nec, mollis tincidunt quam.

Curabitur placerat vestibulum nisl non malesuada. Cras justo purus, molestie pulvinar convallis sed, aliquam at velit. Quisque laoreet semper feugiat. Maecenas varius ut lorem ac feugiat. Nullam interdum metus eu blandit venenatis. Nam condimentum

pretium ex, a sagittis eros pellentesque vitae. Quisque aliquet euismod orci sed egestas. Nullam porta, lacus vel venenatis feugiat, lectus lectus luctus urna, nec ultrices elit felis in augue. Donec non nisi imperdiet, efficitur nibh quis, imperdiet

elit. Sed quis fringilla mauris. Proin at enim tempor, posuere quam a, pulvinar justo. Aliquam in mi enim.</div>

<div class="eight">img container</div>

<div class="box footer">Full width footer</div>

</div>

反對(duì) 回復(fù) 2023-10-30