I have strange behavior of inline blocks in nested flexbox.
This happens in Chrome.
I use green block for spacing, nested .row need to show/hide all it's( content, if remove display:flex(or .row) from it -- .spacer not work.
Can anyone help?
body {
font-size: 20px;
width: 50%;
}
.row {
display: flex;
box-sizing: border-box;
flex-direction: row;
}
.spacer {
flex: 0 0 15px;
text-align: center;
background-color: #AEA;
}
.flex {
flex: 1;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="row">
<span>label</span>
<span class="spacer">|</span>
<div class="row">
<i class="fa fa-clock-o"></i>
<span>date</span>
<span class="spacer"></span>
<span>date2</span>
</div>
<span class="flex"></span>
<span class="fa fa-arrow-down"></span>
</div>
</body>
Related
I know there has been a lot of questions and answers about how to control the overflow of a parent container using flexbox. I couldn't find a solution to this problem so here is another question about it.
What I want
The part where the problem is, is commented in the HTML.
What I get
Here is the code. You might have to copy and paste the code in...:(
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#voolvern_main .voolvern_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.voolvern_gflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a {
text-decoration: none;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.voolvern_grid .voolvern_gridflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#voolvern_main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media (min-width: 40rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 50%;
}
}
#media (min-width: 56rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 32.99999%;
}
}
#voolvern_main>#voolvern_mainaside.voolvern_aside {
-webkit-box-flex: 1;
-ms-flex: 1 1 1rem;
flex: 1 1 1rem;
}
#voolvern_main>#voolvern_rightaside.voolvern_aside {
width: 32%;
}
#voolvern_main>.voolvern_aside>.voolvern_uid {
width: 100%;
}
.voolvern_stackhandler>.voolvern_stackpad {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.voolvern_group.voolvern_nuid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#voolvern_toolbar>.voolvern_group {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span {
padding-top: .8rem;
padding-bottom: .8rem;
padding-right: 1rem;
padding-left: 1rem;
border-radius: 10%;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span:hover {
background: lightgray;
}
.voolvern_stackpad>.voolvern_header>.voolvern_group {
height: 3.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!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">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/db35900820.js">
</script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<title>vvnfinal</title>
<link rel="icon" href="https://cdn.dribbble.com/users/1097/screenshots/168079/newv2.png">
</head>
<body class="voolvern_grid">
<main id="voolvern_main" class="voolvern_gridflex" style="flex: 1rem">
<aside id="voolvern_mainaside" class="voolvern_aside voolvern_gridflex">
<section class="voolvern_uid voolvern_stackhandler" style=" flex-direction: column; display: flex">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_mainasideheader" class="voolvern_header">
<div class="voolvern_group voolvern_nuid">
<span>left</span>
<span>left</span>
</div>
</section>
</div>
<!-- end:: header -->
<div style="flex: 1; border-bottom: .01rem solid lightgray">
<section style="overflow-y: scroll;">
<!-- here is the div that when givin a height of 40rem+ it cuzes the <section> to push down all the contents after it,
I want the <section> to stay put and is scrollable when that happens but I can't seem to figure that out.
-->
<div style="height: 40rem">content</div>
</section>
</div>
<!-- begin:: toolbar -->
<div class="voolvern_stackpad">
<section id="voolvern_toolbar">
<span class="voolvern_group voolvern_nuid">
<!-- begin:: toolbar items -->
<div class="voolvern_nitem">
<a href="/Projects">
<span class="voolvern_span">
<i class="far fa-lightbulb" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Subsidiaries" class="">
<span class="voolvern_span">
<i class="fab fa-hubspot" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-shopping-bag" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-globe-americas" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fas fa-hands-helping" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fab fa-ioxhost" aria-hidden="true">
</i>
</span>
</a>
</div>
<!-- end:: toolbar itemns-->
</span>
</section>
</div>
<!-- end:: toolbar -->
</section>
</aside>
<aside id="voolvern_rightaside" class="voolvern_aside voolvern_nuid">
<section class="voolvern_uid voolvern_stackhandler" style="overflow-y: scroll">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_rightasideheader" class="voolvern_header">
<div class="voolvern_group"> content header </div>
</section>
</div>
<!-- end:: header -->
</section>
</aside>
</main>
</body>
</html>
This whole site will be built using flexbox
Meaning I use:
display: flex
flex: 1
flex-direction: column
To get the full height from elements.
I have spent 2 months trying to figure this problem out.
I would greatly appreciate it if we can solve this problem swiftly.
Thank you!
To make the overflow work correctly you need to position the element you want to do the overflow absolutely. I had the same issue and searched a long time to find this solution. Looks like this is a common behavior when using flex layout.
Here is the relevant change:
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<div style="height: 40rem">content</div>
</section>
</div>
And the changes=d snippet where you can see it work.
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
}
body {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
#voolvern_main .voolvern_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.voolvern_gflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a {
text-decoration: none;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.voolvern_grid .voolvern_gridflex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#voolvern_main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media (min-width: 40rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 50%;
}
}
#media (min-width: 56rem) {
#voolvern_pcard_section.voolvern_stack_two .voolvern_item {
width: 32.99999%;
}
}
#voolvern_main>#voolvern_mainaside.voolvern_aside {
-webkit-box-flex: 1;
-ms-flex: 1 1 1rem;
flex: 1 1 1rem;
}
#voolvern_main>#voolvern_rightaside.voolvern_aside {
width: 32%;
}
#voolvern_main>.voolvern_aside>.voolvern_uid {
width: 100%;
}
.voolvern_stackhandler>.voolvern_stackpad {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.voolvern_group.voolvern_nuid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#voolvern_toolbar>.voolvern_group {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span {
padding-top: .8rem;
padding-bottom: .8rem;
padding-right: 1rem;
padding-left: 1rem;
border-radius: 10%;
}
#voolvern_toolbar>.voolvern_group.voolvern_nuid>.voolvern_nitem .voolvern_span:hover {
background: lightgray;
}
.voolvern_stackpad>.voolvern_header>.voolvern_group {
height: 3.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!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">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/db35900820.js">
</script>
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<title>vvnfinal</title>
<link rel="icon" href="https://cdn.dribbble.com/users/1097/screenshots/168079/newv2.png">
</head>
<body class="voolvern_grid">
<main id="voolvern_main" class="voolvern_gridflex" style="flex: 1rem">
<aside id="voolvern_mainaside" class="voolvern_aside voolvern_gridflex">
<section class="voolvern_uid voolvern_stackhandler" style=" flex-direction: column; display: flex">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_mainasideheader" class="voolvern_header">
<div class="voolvern_group voolvern_nuid">
<span>left</span>
<span>left</span>
</div>
</section>
</div>
<!-- end:: header -->
<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
<section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
<!-- here is the div that when givin a height of 40rem+ it cuzes the <section> to push down all the contents after it,
I want the <section> to stay put and is scrollable when that happens but I can't seem to figure that out.
-->
<div style="height: 40rem">content</div>
</section>
</div>
<!-- begin:: toolbar -->
<div class="voolvern_stackpad">
<section id="voolvern_toolbar">
<span class="voolvern_group voolvern_nuid">
<!-- begin:: toolbar items -->
<div class="voolvern_nitem">
<a href="/Projects">
<span class="voolvern_span">
<i class="far fa-lightbulb" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Subsidiaries" class="">
<span class="voolvern_span">
<i class="fab fa-hubspot" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-shopping-bag" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Discover" class="">
<span class="voolvern_span">
<i class="fas fa-globe-americas" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fas fa-hands-helping" aria-hidden="true">
</i>
</span>
</a>
</div>
<div class="voolvern_nitem">
<a href="/Support" class="">
<span class="voolvern_span">
<i class="fab fa-ioxhost" aria-hidden="true">
</i>
</span>
</a>
</div>
<!-- end:: toolbar itemns-->
</span>
</section>
</div>
<!-- end:: toolbar -->
</section>
</aside>
<aside id="voolvern_rightaside" class="voolvern_aside voolvern_nuid">
<section class="voolvern_uid voolvern_stackhandler" style="overflow-y: scroll">
<!-- begin:: header -->
<div class="voolvern_stackpad">
<section id="voolvern_rightasideheader" class="voolvern_header">
<div class="voolvern_group"> content header </div>
</section>
</div>
<!-- end:: header -->
</section>
</aside>
</main>
</body>
</html>
I've been working on some partial sections. I have two columns of 50% width one with image and other with four boxes of contact address. What I did was placed the image with a specific height but that doesn't seem to work fine with the media queries. So I've gone through some previously asked questions and found out one of them working for me. Everything is fine until I get the section responsive. The image is either getting too large(not aligning to the neighbor col) or getting small. I need to specify the padding each time I change my responsive tab. I need the Image to set its height dynamically.
I know its something tiny but I can't figure it out.
Here is working Fiddle followed by the code I've tried.
.our-specials {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.our-specials .column-6 {
width: 50%;
float: left;
display: table;
flex-wrap: wrap;
justify-content: center;
color: #fff;
}
.col-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.our-image {
background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
background-repeat: no-repeat;
padding-top: 61.766%;
background-size: cover;
}
.contact-details {
text-align: center;
}
.contact-inner {
height: 318px;
width: 50%;
padding: 0 60px;
display: table-cell;
vertical-align: middle;
}
.contact-inner i {
font-size: 35px;
margin-bottom: 10px;
color: #c8001a;
}
.contact-inner p {
font-size: 14px;
color: #6f6f6f;
}
.bg-black {
background-color: #000000;
}
.bg-extra-dark-grey {
background-color: #1c1c1c
}
#media only screen and (max-width: 1024px) {
.our-image {
padding-top: 88.166%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
<div class="col-6">
<div class="our-image"></div>
</div>
<div class="col-6">
<div class="contact-details">
<!-- start contact item -->
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-map-o"></i>
<div class="contact-title">Contact Address</div>
<p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-comments-o"></i>
<div class="contact-title">Let's Talk</div>
<p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
<p class="center-col text-medium">Fax: 1-800-222-002</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-envelope-o"></i>
<div class="contact-title">Email Us</div>
<p class="center-col text-medium no-margin">info#domain.com</p>
<p class="center-col text-medium">hire#domain.com</p>
</div>
</div>
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-clock-o"></i>
<div class="contact-title">Working Hours</div>
<p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
<p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
</div>
</div>
</div>
</div>
</div>
Help me out. Thanks in Advance.
Assuming I've understood correctly, the issue is that part of the image is being obstructed by the blocks on responsive view? If that's the case, setting the .our-image div to have background-size: contain does the trick.
.our-specials {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.our-specials .column-6 {
width: 50%;
float: left;
display: table;
flex-wrap: wrap;
justify-content: center;
color: #fff;
}
.col-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.our-image {
background: url("https://preview.ibb.co/fGwp8R/nintendo_switch_with_red_and_blue_neon_joy_con_controllers.jpg");
background-repeat: no-repeat;
padding-top: 61.766%;
background-size: cover;
}
.contact-details {
text-align: center;
}
.contact-inner {
height: 318px;
width: 50%;
padding: 0 60px;
display: table-cell;
vertical-align: middle;
}
.contact-inner i {
font-size: 35px;
margin-bottom: 10px;
color: #c8001a;
}
.contact-inner p {
font-size: 14px;
color: #6f6f6f;
}
.bg-black {
background-color: #000000;
}
.bg-extra-dark-grey {
background-color: #1c1c1c
}
.our-image {
background-size: contain;
}
#media only screen and (max-width: 1024px) {
.our-image {
padding-top: 88.166%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="section-row our-specials clearfix" style="padding-bottom: 0;">
<div class="col-6">
<div class="our-image"></div>
</div>
<div class="col-6">
<div class="contact-details">
<!-- start contact item -->
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-map-o"></i>
<div class="contact-title">Contact Address</div>
<p class="width-60 md-width-80 center-col text-medium">301 The Greenhouse, Custard Factory, London, E2 8DY.</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-comments-o"></i>
<div class="contact-title">Let's Talk</div>
<p class="center-col text-medium no-margin">Phone: 1-800-222-000</p>
<p class="center-col text-medium">Fax: 1-800-222-002</p>
</div>
</div>
<div class="column-6 bg-black">
<div class="contact-inner">
<i class="fa fa-envelope-o"></i>
<div class="contact-title">Email Us</div>
<p class="center-col text-medium no-margin">info#domain.com</p>
<p class="center-col text-medium">hire#domain.com</p>
</div>
</div>
<div class="column-6 bg-extra-dark-grey">
<div class="contact-inner">
<i class="fa fa-clock-o"></i>
<div class="contact-title">Working Hours</div>
<p class="center-col text-medium no-margin">Mon to Sat - 9 AM to 11 PM</p>
<p class="center-col text-medium">Sunday - 10 AM to 6 PM</p>
</div>
</div>
</div>
</div>
</div>
You'll wanna use background-size: contain; on .our-image for it to maintain the aspect ration.
you used a class named our-image. where you arranged image as background image and set its size to cover.
That doesn't seems right. cover will always keep the size to fill your div.
1st : use image as html element. its always better and recommended.
2nd : remove background url as image.
3rd : responsiveness depends on the screen width. so use the width width : 100% or whatever size you want.
4th : define #media screen query to arrange your image for different screen size.
Simple and effective.
Say I want to a container of courses that would look something like this
Is this bad making essentially each part of the "course" it's own flexbox?
.course-container {
display: flex;
flex-direction: column;
}
.course-options {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-title {
display: flex;
flex-direction: row;
justify-content: center;
}
.course-grade {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
<div class="course">
<div class="course-options">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
</div>
<div class="course-title">
Course 1
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
<div class="course">
<div class="course-options">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
</div>
<div class="course-title">
Course 2
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
</div>
You don't need to define display: flex on each inner element, you can use align-self instead.
.course-container,
.course {
display: flex;
flex-direction: column;
}
.course {
width: 300px;
border: 1px solid black;
padding: 10px;
height: 100px;
margin: 5px;
justify-content: space-between;
}
.course-options {
display: flex;
justify-content: space-between;
}
.course-title {
align-self: center;
}
.course-grade {
align-self: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
<div class="course">
<div class="course-options">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
</div>
<div class="course-title">
Course 1
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
<div class="course">
<div class="course-options">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
</div>
<div class="course-title">
Course 2
</div>
<div class="course-grade">
Grade: 0.00%
</div>
</div>
</div>
There is nothing wrong with how you set it up, and whether it is the best is very much dependent on how a course box should behave.
With what I know now, you could optimize that code, which I would, and achieve the same result.
Here I removed all inner wrappers and used auto margins, which got an upgrade with Flexbox, that make it easy to align items within its parent.
The benefit with a structure like this, besides being having a lot less markup, you have endless ways to reorder the items based on content or screen sizes.
Stack snippet
.course-container {
display: flex;
flex-direction: column;
}
.course {
display: flex;
flex-wrap: wrap;
align-items: flex-start; /* align to top, and prevent from stretch */
width: 250px;
height: 120px;
margin: 5px;
border: 1px solid lightgray;
}
.course .fa-trash-o,
.course .grade {
margin-left: auto; /* push trash and grade to the right */
}
.course .grade {
margin-top: auto; /* push to bottom */
}
.course .title {
flex-basis: 100%; /* take full width, make it wrap on a row of its own */
margin: auto 0; /* center vertically */
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="course-container">
<div class="course">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
<a class='title' href="">Course 1</a>
<a class='grade' href="">Grade: 0.00%</a>
</div>
<div class="course">
<i class='fa fa-pencil-square-o fa-lg' aria-hidden="true"></i>
<i class='fa fa-trash-o fa-lg' aria-hidden="true"></i>
<a class='title' href="">Course 2</a>
<a class='grade' href="">Grade: 0.00%</a>
</div>
</div>
This situation does NOT require flexbox. Flexbox still has less than 90% browser support worldwide (unprefixed), so I would not use it yet, unless you have absolutely no alternative.
This is a proper solution that works in all browsers:
.card {
text-align: center;
position: relative;
width: 100%;
max-width: 300px;
height: 100px;
line-height: 100px;
border: 1px solid black;
margin: 5px;
}
.card > * {line-height: 1.4em; position: absolute;}
.card > .edit {left: 0; top: 0;}
.card > .delete {right: 0; top: 0;}
.card > .grade {right: 0; bottom: 0;}
<div class="card">
edit
delete
<span class="grade">grade</span>
course 1
</div>
<div class="card">
edit
delete
<span class="grade">grade</span>
course 2
</div>
Do you know why the list items are not occupying the full width (have some white margin)? And also why the right arrow is not position at right using justify-content: space-between.
Example: http://jsfiddle.net/Lph010v6/
HTML:
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<ul class="MobileCategories">
<li>
<div>
<img src="/img/categories/category1.svg"/>
<span class="MobileCategories__title">Category</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</li>
<li>
<div>
<img src="/img/categories/category2.svg"/>
<span class="MobileCategories__title">Category 2</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</li>
</ul>
</div>
</div>
</div>
CSS:
.MobileCategories{
margin-top: 10px;
width: 100%;
background-color:green;
li{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
background-color: orange;
padding:20px;
img{
width: 30px;
height: 30px;
}
.MobileCategories__title{
margin-left: 15px;
}
}
}
Do you know why the list items are not occupying the full width (have
some white margin)?
The container-fluid has some default padding - reset this to 0 (if so desired)
And also why the right arrow is not position at right using
justify-content-between.
Note that you have an empty a tag inside the li that is preventing the justify-content: space-between.
See demo below:
/*This style from normalize styles of jsfiddle*/
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container-fluid { /*ADDED THIS*/
padding: 0!important;
}
.MobileCategories {
margin-top: 10px;
width: 100%;
background-color: green;
}
.MobileCategories li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
background-color: orange;
padding: 20px;
}
.MobileCategories li img {
width: 30px;
height: 30px;
}
.MobileCategories li .MobileCategories__title {
margin-left: 15px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<ul class="MobileCategories">
<li>
<div>
<img src="/img/categories/category1.svg" />
<span class="MobileCategories__title">Category</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<!-- -->
</li>
<li>
<div>
<img src="/img/categories/category2.svg" />
<span class="MobileCategories__title">Category 2</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<!-- -->
</li>
</ul>
</div>
</div>
</div>
Your li elements are taking up the full width in your Fiddle. You have padding on your container-fluid element that is adding padding - set this to 0 and it will remove it.
.container-fluid { padding-left:0; padding:right:0; }
The arrow is not being positioned to the right because it is not the right-most element. You have an <a> element after it, and it is getting positioned to the right - you just can't see it because it's empty.
<li>
<div>[...]</div>
<span>[..]</span>
/* this is the element being positioned to the right*/
</li>
I want the 3 boxes to fill the height of the screen in 1:4:1 ratio.
*{
margin:0;
padding:0;
}
.container{
display: flex;
flex-direction:column;
align-items: center;
height:100100%;
width:100%;
}
.title{
background:yellow;
flex-basis:30px;
flex-grow:1;
}
.box{
background:green;
flex-basis:120px;
flex-grow:4;
}
.buttons{
background:red;
flex-basis:30px;
flex-grow:1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="title">
Random Quote Generator
</div>
<div class="box">
This is Where Author and Quote go.
</div>
<p class="blank"></p>
<div class="buttons">
<a class="button"><i class="fa fa-twitter"></i></a>
<a class=button><i class="fa fa-tumblr"></i></a>
<a class='button'><i class="fa fa-chevron-right"></i></a>
</div>
</div>
You're using percentage heights. That requires you to define a height on the parent element. It gets tricky. See here: Working with the CSS height property and percentage values
Instead, just use height: 100vh, which is much simpler and easier.
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh; /* NEW */
width: 100%;
}
.title {
background: yellow;
flex: 1 0 30px;
}
.box {
background: green;
flex: 4 0 120px;
}
.buttons {
background: red;
flex: 1 0 30px;
}
* {
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="title">
Random Quote Generator
</div>
<div class="box">
This is Where Author and Quote go.
</div>
<p class="blank"></p>
<div class="buttons">
<a class="button"><i class="fa fa-twitter"></i></a>
<a class=button><i class="fa fa-tumblr"></i></a>
<a class='button'><i class="fa fa-chevron-right"></i></a>
</div>
</div>