Given the below flex CSS layout.
I need the images to scale smaller as the page is resized, hence the img { width: 100% } This allows the page to be resized, and the images scale accordingly.
I am unsure of why this layout results in the three Blog entries being of different width, particularly as the images in question are all the same.
Here is a working bootply.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
flex: 1;
flex-flow: row nowrap;
}
div.container div.blog div,
div.container-fluid div.blog div {
margin: 0 12.5px;
}
div.container div.blog div:first-of-type,
div.container-fluid div.blog div:first-of-type {
margin-left: 0px;
}
div.container div.blog div:last-of-type,
div.container-fluid div.blog div:last-of-type {
margin-right: 0px;
}
div.container div.blog div img,
div.container-fluid div.blog div img {
width: 100%;
}
div.container div.blog h1,
div.container-fluid div.blog h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container div.blog h2,
div.container-fluid div.blog h2 {
color: #8f825a;
font-size: 1.8rem;
}
div.container div.blog+section,
div.container-fluid div.blog+section {
margin-top: 5rem;
}
Given the following HTML
<div class="container">
<h1>Blog</h1>
<div class="blog">
<div>
<img src="image1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit Libero tenetur,
earum repudiandae ut fuga qui modi maxime dolorem quo! Id maiores neque rem
dignissimos amet velit perspiciatis labore veritatis eligendi.
</p>
<h2>Fred Jones</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image2">
<h1>Eum debitis</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum debitis culpa modi, illo ullam necessitatibus
beatae. Eveniet sequi quos explicabo magni ipsum nostrum asperiores dolore aliquam libero
accusantium ullam omnis, sed fugiat dolorem est, quae quaerat deserunt labore delectus. Quis, earum fugit,
necessitatibus recusandae perferendis, ducimus dignissimos amet autem ea, consequatur neque!
</p>
<h2>Joe Soap</h2>
<h3>2014-01-01</h3>
</div>
<div>
<img src="image3">
<h1>Aliquid nesciunt delectus</h1>
<p>
Ut, sapiente, qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquid nesciunt delectus, quae deleniti voluptas neque consequatur,provident perspiciatis laborum culpa
corporis fugit earum cupiditate deserunt vero atque harum iste illum officia maxime. Et officia distinctio
corrupti repellat! Repellendus, distinctio voluptates, earum quidem dolore facere.
</p>
<h2>Ishmael</h2>
<h3>2014-01-01</h3>
</div>
</div>
</div>
You have specified flex: 1 on the flex container. It doesn't apply there.
You need to apply flex: 1 to the items, if you want them to distribute container space equally.
div.container div.blog,
div.container-fluid div.blog {
display: flex;
/* flex: 1; <----------- NOT DOING ANYTHING */
flex-flow: row nowrap;
}
The parent element of the above-reference code block (div.container) is not a flex container, so flex is having no effect.
Shift the rule to your flex items:
div.container div.blog div, div.container-fluid div.blog div {
margin: 0 12.5px;
flex: 1; /* NEW */
}
revised demo
Related
I have the following situation using flex: Codepen
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display:flex;
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
I want that when the div is smaller than 490px (it wraps) that a margin exists between "My button" and the last item in "content", which would be "right content" from the example.
Is there a way to do so?
Use this with content margin-bottom:clamp(0px,(450px - 100%)*9999,20px). It's a conditional margin based on the value 450px. If the container is bigger than 450px you have 0px else you have 20px
* {
box-sizing: border-box;
}
.first-card {
border: 1px black solid;
width: 480px;
padding: 24px;
display: flex;
flex-direction: column;
overflow:auto;
resize:horizontal;
}
.content {
flex-wrap: wrap;
grid-gap: 32px;
display: flex;
margin-bottom:clamp(0px,(450px - 100%)*9999,20px)
}
.left-content {
border: 1px green solid;
flex-grow: 1;
flex-basis: 200px;
}
.right-content {
flex-grow: 1;
border: 1px deeppink solid;
flex-basis: 200px;
}
<html>
<body>
<div class="first-card">
<h1>Title</h1>
<div class="content">
<div class="left-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus
veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
</div>
<div class="right-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae
reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
</div>
</div>
<div class="buttons">
<button> My button</button>
</div>
</div>
</body>
</html>
Unfortunately with just CSS, no. If your div width relies on something like screen width, you could use media queries.
With javascript, You could poll the element for its width and conditionally add or remove the styling needed for the buttons margin-top.
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
I have a simple grid (https://jsfiddle.net/3f5oLjxu/1/), how can I get the links on the left side of the grid to center vertically, instead of being positioned at the top.
css:
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 0px 12%;
}
.grid>* {
border: 1px solid lightgray;
padding: 15px;
}
<div class="grid">
<nav>
<ul>
<li>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
</section>
</div>
<!-- close grid -->
I have tried all sorts of combinations of justify-content, justify-items, align-self, margin: auto;, turning the nav into a flex item, the ul into a flex item, etc... Thanks in advance for any help.
You could do this using flexbox:
https://yoksel.github.io/flex-cheatsheet/
It is easy to learn and is very common tool in nowadays websites.
Make .grid a flex item with flex-basis: 100%; and flex-flow: row nowrap;
Make .nav a flex container, and align it's items in the center with align-items: center;
OR if you just want to use flex on your nav element and nowhere else, doing
nav{
display: flex;
align-items: center;
}
would be totally sufficient, If you don't want your whole layout to have a flexy manner
.grid {
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
margin: 0px 12%;
}
.nav{
display: flex;
align-items: center;
}
.grid>* {
border: 1px solid lightgray;
padding: 15px;
}
<div class="grid">
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>Interior Painting</li>
<li>Exterior Painting</li>
<li>Deck Painting</li>
<li>Power Wash</li>
<li>Wallpaper Remvoal</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
dignissimos error expedita debitis, eligendi a, dolorum velit, doloremque est repellat perferendis consectetur non similique mollitia maiores officiis totam voluptatibus libero.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Distinctio non provident sunt, voluptatem omnis. Porro nisi architecto expedita quae odit distinctio sint illo, tempora possimus dolore at, reprehenderit corrupti voluptatibus.
</section>
</div>
<!-- close grid -->
To change the position of a child of a grid, you can use the *-self property. Vertical will be your column access, use nav {align-self: center;} to vertically center the nav in this scenario.
You can use the flexbox layout module. It seems like you were on the track there to begin with. Just attach this to the nav style.
nav {
display: flex;
alignt-items: center;
}
Trying to center the text I have in an element with a display property value of just inline but to no avail.
Below would've been a perfect example of what I want if the text would align in the middle.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center!important;
}
<div id="inliner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
I tried adding an inner DIV to help me achieve that. Far from desired result because the green background disappears and can only be seen the bottom area.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center;
}
#inliner-in {
width: 100%;
height: 100%;
display: inline-block;
}
<div id="inliner">
<div id="inliner-in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
</div><!-- End Inliner -->
Add the background-color and display:inline to the child DIV.
#inliner {
padding: 10px;
font-size: 24px;
text-align: center;
}
#inliner-in {
background-color: green;
width: 100%;
height: 100%;
display: inline;
line-height: 50px;
}
Check on your console if your css if being correctly applied, because I think what you have there is supposed to work but if not...
You can try by aligning the entire div like:
#inliner {
margin-left: auto;
margin-right: auto;
}
My layout has a container flex-container and a child.
HTML:
<div class="flex-container">
<div>text</div>
</div>
The container and the child have an unknown height. And the goal is:
If the child has a lower height than the container, it appears centered horizontally and vertically.
If the child has a greater height than the container, it adjusts to the top and the bottom and we can do scroll.
Scheme:
The fastest way for centering a element with flexbox is the follow:
.flex-container
{
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
width: 100%;
height: 300px; /* for example purposes */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://www.codepen.io/ces/pen/slicw
But, if the container's child have a greater height, the child is not shown correctly. The child appears cutted (only the top part).
html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container
{
display: flex;
align-items: center; // vertical
justify-content: center; // horizontal
width: 100%;
height: 100px;
overflow-y: scroll;
background: #2a4;
}
.flex-container > div
{
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://www.codepen.io/ces/pen/sGtfK
Scheme:
Is there a way for resolve this issue?
I found the solution:
.flex-container {
display: flex; /* only */
overflow-y: scroll;
}
.flex-container > div {
margin: auto; /* horizontal and vertical align */
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
height: 100px; /* change height to 300px */
overflow-y: scroll;
background: #2a4;
}
.flex-container > div {
padding: 1em 1.5em;
margin: auto;
background: #E77E23;
width: 400px;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>
Codepen: http://codepen.io/ces/pen/Idklh
Don't use justify-content: center or align-items: center. To achieve center alignment, just put empty elements on either side and set the empty elements to flex: 1, so that they push the center element to the center.
Add align-self:flex-start; to .flex-container > div can resolve this problem too.
See: http://www.w3.org/TR/css-flexbox-1/#auto-margins