This question already has answers here:
flex property not working in IE
(5 answers)
Closed 5 years ago.
I've been trying to solve this issue in the list of IE bugs, but can't seem to find it in there.
It is solved by avoiding the shorthand flex-declaration on the inner element (.inner) - flex: 1; -> flex: 1 1 auto;.
Can you help me please?
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
display:flex;
flex: 1;
flex-direction: column;
outline: 1px solid;
}
.inner {
flex: 1;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quidem cum quod, sed iure aspernatur enim nihil vitae eos ullam molestias possimus quia repellat, delectus, rem est quibusdam. Ipsum, perspiciatis.
</div>
</div>
<div class="flex-item">
<div class="inner">
lorem
</div>
</div>
<div class="flex-item">
<div class="inner">
lorem
</div>
</div>
<div class="flex-item">
<div class="inner">
lorem
</div>
</div>
</div>
Actually issue is Flex items overflowing parent in IE11
This issue fixed by flex: 1 0 auto instead of flex: 1
Related
I am having trouble centering a heading and text element in a 2x2 grid. I have already tried using justify-content/items/self on the parent container ".skills", and the child-elements ".skills-item". Also, note that the grid is inside a flex container, I do not know if that has anything to do with it but I am clueless.
.about {
display: flex;
flex-direction: column;
align-items: center;
padding: 12.8rem 8rem 6.4rem 8rem;
background-color: #ebebff;
}
.backstory {
display: flex;
flex-direction: column;
align-items: center;
width: 60rem;
margin-bottom: 4.8rem;
text-align: center;
}
.skills {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 4.8rem;
column-gap: 6.4rem;
justify-items: center;
}
.skills-item {
display: inline-block;
}
<section class="about">
<div class="backstory">
<h2>Hi, I'm Mayitu Wangala</h2>
<p>
I'm a software developer. I became interested in computer science in college and became immersed in the world of IT. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci.
</p>
</div>
<div class="skills">
<!--Rename/regroup skills later-->
<div class="skills-item 3-lang">
<h3 class="skills-heading">HTML, CSS, Javascript</h3>
<p>
My knowledge of HTML, CSS, and javascript allows me to create beautiful, responsive projects and websites.
</p>
</div>
<div class="skills-item python">
<h3 class="skills-heading">Python</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
<div class="skills-item data-structures">
<h3 class="skills-heading">Data Structures</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
<div class="skills-item design">
<h3>Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos cum magni similique adipisci
</p>
</div>
</div>
</section>
You should set the parent class as flexbox in order to align the child elements as you wish.
.skills-item{
display:flex;
}
Since the text inside p tags won't seem like centered, even if it is, you can try to use text-align:center;.
How do I make the image go under the text in the mobile? And for the text to go on the left side, instead of being more on the right - if this makes sense :)
CSS (Image): https://pastebin.com/pGBdbBhs
CSS (Content): https://pastebin.com/1SY2JXUa
HTML:
<div class="content">
<div class="left-200">
<div>
<h3>Lorem ipsum</h3>
<div class="padding-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div class="padding-10"></div>
<img src="./images/default-image.png" alt="Image" class="image"/>
</div>
</div>
Desktop:
Mobile:
Thank you!
To make a responsive design you can either go the bootstrap root or you can do the #media in the CSS. Take a look at this site which will point you in the right direction.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I solved it! Basically I wrapped it up in a div and set display:none; if the device was on mobile. And I did the same thing for desktop!
Your CSS and HTML looks a little random here and there. For example those padding divs. Also your .left-200 class has two display properties. I would recommend to clean it up and then add the paddings, margins etc.
You really only need display: flex and flex-wrap for this task and set the other values like width accordingly.
.content {
padding: 200px 50px;
display: flex;
flex-wrap: wrap;
}
#flex-text {
width: 400px;
}
<div class="content">
<div id="flex-text">
<h3>Lorem ipsum</h3>
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
-->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div id="flex-image"> <img src="./images/default-image.png" alt="Image" class="image"/> </div>
</div>
How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?
I was thinking about creating a new container.
.container--full { max-width: 1400px; width: 100%; }
My .container grid has a max-width of 1170px. So my new container is wider than .container.
And then set a background-image, position left and background color grey.
Inside that .container--full, create .container
<div class="container--full">
<div class="container">
</div>
</div>
Test with container-fluid.
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}
Just use bootstraps 'container-fluid' class. (learn more)
<div class="container-fluid">
<div class="row>
...
</div>
</div>
I'm trying to create masonry layout using css grid layout. All items in grid have variable heights. And I don't know what items will be. So I can't define grid-row for each item. Is it possible to start each new item right after end of previous in column?
Code I'm trying:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 330px);
align-items: flex-start;
grid-column-gap: 10px;
grid-row-gap: 50px;
}
.item {
background: black;
border-radius: 5px;
}
<div class="wrapper">
<div class="item" style="height:50px"></div>
<div class="item" style="height:100px"></div>
<div class="item" style="height:30px"></div>
<div class="item" style="height:90px"></div>
<div class="item" style="height:80px"></div>
<div class="item" style="height:50px"></div>
<div class="item" style="height:70px"></div>
<div class="item" style="height:40px"></div>
</div>
full codepen here
In your question you are setting the height of each item individually. If you are happy to do this then a Masonry layout can easily be achieved with grid.
Instead of setting a height for each item set grid-row-end so that each item spans a certain number of rows.
<div class="item" style="grid-row-end: span 5"></div>
The height of the item will then depend on the values of grid-auto-rows and grid-row-gap you have set for the grid.
I have made a Codepen here: https://codepen.io/andybarefoot/pen/NaprOB
If you don't want to individually set the grid-row-end value for each item you can use a bit of JavaScript to do it dynamically. I put another "container" div inside each item and measure the height of this container to calculate how many rows the item needs to span. I do this on page load, and again for each item when any images are loaded (as the height of the content will have changed). If you combine this approach with a responsive layout then you should also recalculate on page resize as the width of the columns may have changed and this will affect the height of the content.
Here's my full example with responsive column resizing: https://codepen.io/andybarefoot/pen/QMeZda
If you have items with variable widths you can still achieve a similar effect but the packing of the grid won't be perfect and the item order may be changed to optimise the packing.
I wrote a blog on Medium about this approach in case it is of interest: A Masonry style layout using CSS Grid
You can set span values for grid-row-end dynamically (with a bit of JS, like the one based on my Codepen experiment in the example below) and use the dense keyword for grid-auto-placement:
const gridStyles = getComputedStyle(document.querySelector('.wrapper',null));
const rowHeight = parseInt(gridStyles.getPropertyValue('--grid-row-height'));
const gap = parseInt(gridStyles.getPropertyValue('--grid-gutter'));;
let makeGrid = function() {
let items = document.querySelectorAll('.item');
for (let i=0, item; item = items[i]; i++) {
// take an item away from grid to measure it
item.classList.add('is-being-measured');
let height = item.offsetHeight;
// calcylate the row span
let rowSpan = Math.ceil((height + gap)/(rowHeight + gap));
// set the span value for grid-row-end
item.style.gridRowEnd = 'span '+rowSpan;
// return the item into the grid
item.classList.remove('is-being-measured');
}
}
window.addEventListener('load', makeGrid);
window.addEventListener('resize', () => {
clearTimeout(makeGrid.resizeTimer);
makeGrid.resizeTimer = setTimeout(makeGrid, 50);
});
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 330px);
--grid-gutter: 10px;
grid-gap: var(--grid-gutter);
--grid-row-height: 10px;
grid-auto-rows: var(--grid-row-height);
grid-auto-flow: row dense;
position: relative;
}
.item {
background: black;
color: white;
border-radius: 5px;
}
.item.is-being-measured {
/* temporary styles for measuring grid items */
position: absolute;
width: 330px;
top: 0;
left: 0;
}
.item > * { margin-left: 20px; }
<div class="wrapper">
<div class="item"><h3>1.1</h3><p>1.2</p></div>
<div class="item"><p>2.1</p><p>2.2</p><p>2.3</p><p>2.4</p><p>2.5</p></div>
<div class="item"><h2>3.1</h2></div>
<div class="item"><h2>4.1</h2><p>4.2</p><p>4.3</p><p>4.4</p></div>
<div class="item"><p>5.1</p><p>5.2</p><p>5.3</p><p>5.4</p></div>
<div class="item"><h2>6.1</h2><p>6.2</p></div>
<div class="item"><h2>7.1</h2><p>7.2</p><p>7.3</p></div>
<div class="item"><p>8.1</p><p>8.2</p></div>
</div>
This is one way to create the Masonry layout using only CSS.
*,
*:before,
*:after {
box-sizing: border-box !important;
}
article {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: #efefef;
}
p {
margin: 1rem 0;
}
body {
line-height: 1.25;
}
<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
</section>
<section>
<p>Lorem ipsum dolor sit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</section>
</article>
Note: I didn't made the code, I found it an made some small adaptation,
the original code can be found here.
Please note that, as pointed out by Zen:
[...] the items are laid out top-to-bottom, left-to-right,
whereas what one usually expects (cultural assumptions excused) is
left-to-right, top-to-bottom layout. This is the showstopper for the usual CSS3-columns-based recommendations.
You can accomplish this with column.
.wrapper {
column-gap: 10px;
column-count: 4;
}
.item {
display: inline-block;
background: #000;
width: 100%;
border-radius: 3px;
}
It looks like you were trying to use a combination of flex and grid, which may have been confusing things. As far as I know, flex is relative to the rest of the items on the page, where setting a column affects items falling into those columns.
updated codepen
I've spent a lot of time trying to figure out how I can create a layout similar to this, where the pages content is constrained by the container element's width, but the column on the left has a background that stretches to the far left of the user's screen (the yellow one in the example).
I'm trying to do this with Bootstrap, but it seems impossible as the container element contains the content of the page and also it's background.
Here is the JSFiddle for what I have so far.
Some sample code of the structure:
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Would really appreciate if someone can solve this mystery for me.
Here's the full code:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{
background: #eee;
}
.left-one{
background: yellow;
height: 500px;
padding-top: 20px;
}
.right-one{
background: #eee;
height: 500px;
padding-top: 20px;
}
.some-content{
background: lightslategray;
padding: 20px 0;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Just do what the guy have done in example & use the before element.
DEMO
CSS:
.left-one:before{
background: yellow;
bottom: 0;
content: "";
position: absolute;
right: 100%;
top: 0;
width: 9999px;
}