flex-box, keep a first line unwrapped
I have a container where I need inner blocks following each other and behave like floated ones. I cannot use float as the layout should re-arrange after a resolution changes. Currently, I need both the blocks 1 (70% width) and 2 (30%) reside the same line, but a second one moves itself to the next line:
HTML:
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
CSS
body * {
box-sizing: border-box;
}
section {
background: #ddd;
display: flex;
flex-direction: column;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
}
You can see the live example here: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview
So, is it possible to achieve? Finally, it should look like this:
html css flexbox
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
add a comment |
I have a container where I need inner blocks following each other and behave like floated ones. I cannot use float as the layout should re-arrange after a resolution changes. Currently, I need both the blocks 1 (70% width) and 2 (30%) reside the same line, but a second one moves itself to the next line:
HTML:
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
CSS
body * {
box-sizing: border-box;
}
section {
background: #ddd;
display: flex;
flex-direction: column;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
}
You can see the live example here: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview
So, is it possible to achieve? Finally, it should look like this:
html css flexbox
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
add a comment |
I have a container where I need inner blocks following each other and behave like floated ones. I cannot use float as the layout should re-arrange after a resolution changes. Currently, I need both the blocks 1 (70% width) and 2 (30%) reside the same line, but a second one moves itself to the next line:
HTML:
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
CSS
body * {
box-sizing: border-box;
}
section {
background: #ddd;
display: flex;
flex-direction: column;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
}
You can see the live example here: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview
So, is it possible to achieve? Finally, it should look like this:
html css flexbox
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
I have a container where I need inner blocks following each other and behave like floated ones. I cannot use float as the layout should re-arrange after a resolution changes. Currently, I need both the blocks 1 (70% width) and 2 (30%) reside the same line, but a second one moves itself to the next line:
HTML:
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
CSS
body * {
box-sizing: border-box;
}
section {
background: #ddd;
display: flex;
flex-direction: column;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
}
You can see the live example here: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview
So, is it possible to achieve? Finally, it should look like this:
html css flexbox
html css flexbox
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
edited Nov 21 '18 at 20:26
Yandy_Viera
3,50531238
3,50531238
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
asked Nov 21 '18 at 20:06
srgg6701srgg6701
61331128
61331128
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You can add flex-wrap: wrap; to section and remove the flex-direction: column; like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
if you want the 'Bottom line' fill the entire row add flex-grow: 1; to section > div:nth-child(3)
The final result will be something like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
Here a working example
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
add a comment |
Do you explicitly NEED to use column display for this section? If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. You also have to remove flex-direction: column from the parent.
Here's an updated example for you which produces the desired result.
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
add a comment |
I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. Hope this helps :)
<head>
<style>
body *{
box-sizing: border-box;
}
section{
background: #ddd;
display: flex;
flex-wrap: wrap;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
</body>
</html>
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419733%2fflex-box-keep-a-first-line-unwrapped%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can add flex-wrap: wrap; to section and remove the flex-direction: column; like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
if you want the 'Bottom line' fill the entire row add flex-grow: 1; to section > div:nth-child(3)
The final result will be something like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
Here a working example
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
add a comment |
You can add flex-wrap: wrap; to section and remove the flex-direction: column; like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
if you want the 'Bottom line' fill the entire row add flex-grow: 1; to section > div:nth-child(3)
The final result will be something like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
Here a working example
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
add a comment |
You can add flex-wrap: wrap; to section and remove the flex-direction: column; like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
if you want the 'Bottom line' fill the entire row add flex-grow: 1; to section > div:nth-child(3)
The final result will be something like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
Here a working example
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
You can add flex-wrap: wrap; to section and remove the flex-direction: column; like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //add this
}
if you want the 'Bottom line' fill the entire row add flex-grow: 1; to section > div:nth-child(3)
The final result will be something like this
section {
background: #ddd;
display: flex;
/* flex-direction: column; */
max-width: 300px;
flex-wrap: wrap; //new
}
section > div:nth-child(3) {
background-color: yellow;
flex-grow: 1; //new
}
Here a working example
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
edited Nov 21 '18 at 20:21
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
answered Nov 21 '18 at 20:15
Yandy_VieraYandy_Viera
3,50531238
3,50531238
add a comment |
add a comment |
Do you explicitly NEED to use column display for this section? If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. You also have to remove flex-direction: column from the parent.
Here's an updated example for you which produces the desired result.
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
add a comment |
Do you explicitly NEED to use column display for this section? If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. You also have to remove flex-direction: column from the parent.
Here's an updated example for you which produces the desired result.
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
add a comment |
Do you explicitly NEED to use column display for this section? If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. You also have to remove flex-direction: column from the parent.
Here's an updated example for you which produces the desired result.
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
Do you explicitly NEED to use column display for this section? If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. You also have to remove flex-direction: column from the parent.
Here's an updated example for you which produces the desired result.
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
answered Nov 21 '18 at 20:16
brianespinosabrianespinosa
1,613716
1,613716
add a comment |
add a comment |
I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. Hope this helps :)
<head>
<style>
body *{
box-sizing: border-box;
}
section{
background: #ddd;
display: flex;
flex-wrap: wrap;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
</body>
</html>
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
add a comment |
I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. Hope this helps :)
<head>
<style>
body *{
box-sizing: border-box;
}
section{
background: #ddd;
display: flex;
flex-wrap: wrap;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
</body>
</html>
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
add a comment |
I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. Hope this helps :)
<head>
<style>
body *{
box-sizing: border-box;
}
section{
background: #ddd;
display: flex;
flex-wrap: wrap;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
</body>
</html>
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. Hope this helps :)
<head>
<style>
body *{
box-sizing: border-box;
}
section{
background: #ddd;
display: flex;
flex-wrap: wrap;
max-width:300px;
}
section > div{
padding: 10px;
}
section > div:nth-child(1){
background-color: pink;
width: 70%;
}
section > div:nth-child(2){
background-color: lightgreen;
align-self: flex-end;
width: 30%;
}
section > div:nth-child(3){
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<section>
<div>Header</div>
<div>SideRight</div>
<div>Bottom line</div>
</section>
</body>
</html>
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
answered Nov 21 '18 at 20:21
Brady WardBrady Ward
717
717
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419733%2fflex-box-keep-a-first-line-unwrapped%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
