flex-box, keep a first line unwrapped
up vote
2
down vote
favorite
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 at 20:26
Yandy_Viera
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
add a comment |
up vote
2
down vote
favorite
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 at 20:26
Yandy_Viera
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
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 at 20:26
Yandy_Viera
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
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 at 20:26
Yandy_Viera
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
edited Nov 21 at 20:26
Yandy_Viera
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
edited Nov 21 at 20:26
Yandy_Viera
3,40531236
edited Nov 21 at 20:26
Yandy_Viera
3,40531236
edited Nov 21 at 20:26
Yandy_Viera
3,40531236
3,40531236
asked Nov 21 at 20:06
srgg6701
5623928
asked Nov 21 at 20:06
srgg6701
5623928
asked Nov 21 at 20:06
srgg6701
5623928
5623928
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
up vote
2
down vote
accepted
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 at 20:15
Yandy_Viera
3,40531236
add a comment |
up vote
1
down vote
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 at 20:16
brianespinosa
1,352716
add a comment |
up vote
1
down vote
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 at 20:21
Brady Ward
214
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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 at 20:15
Yandy_Viera
3,40531236
add a comment |
up vote
2
down vote
accepted
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 at 20:15
Yandy_Viera
3,40531236
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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 at 20:15
Yandy_Viera
3,40531236
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 at 20:15
Yandy_Viera
3,40531236
edited Nov 21 at 20:21
answered Nov 21 at 20:15
Yandy_Viera
3,40531236
answered Nov 21 at 20:15
Yandy_Viera
3,40531236
answered Nov 21 at 20:15
Yandy_Viera
3,40531236
3,40531236
add a comment |
add a comment |
up vote
1
down vote
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 at 20:16
brianespinosa
1,352716
add a comment |
up vote
1
down vote
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 at 20:16
brianespinosa
1,352716
add a comment |
up vote
1
down vote
up vote
1
down vote
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 at 20:16
brianespinosa
1,352716
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 at 20:16
brianespinosa
1,352716
answered Nov 21 at 20:16
brianespinosa
1,352716
answered Nov 21 at 20:16
brianespinosa
1,352716
answered Nov 21 at 20:16
brianespinosa
1,352716
1,352716
add a comment |
add a comment |
up vote
1
down vote
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 at 20:21
Brady Ward
214
add a comment |
up vote
1
down vote
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 at 20:21
Brady Ward
214
add a comment |
up vote
1
down vote
up vote
1
down vote
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 at 20:21
Brady Ward
214
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 at 20:21
Brady Ward
214
answered Nov 21 at 20:21
Brady Ward
214
answered Nov 21 at 20:21
Brady Ward
214
answered Nov 21 at 20:21
Brady Ward
214
214
add a comment |
add a comment |
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
