I am trying to style the content of modal title. It will contain a center image, and two smaller columns containing 1 or 2 buttons/images. I would like everything to align vertically and horizontally. The size of the center images varies. Seems like a job for flexbox. In my actual code, the content of #headerLHS/#headerRHS/#myModalLabel is set dynamically
<div class="modal-title row" id="headerBox" class="container-fluid">
<div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
<div id="myModalLabel" class="col-xs-6"></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
So far my css is:
#headerLHS,#headerRHS {
display: flex; webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: space-around;
align-items: center;
}
But this doesn't work. I seem to need styling on #lhs and #rhs but I've no idea what it should be. I've played with all sorts to flex-box markup, to no avail. Can someone help.
Thanks.
You do not have equal height column, you should apply the flexbox on the parent too and set `flex-wrap: wrap;
#headerBox
{
display:flex;
webkit-display: flex;
flex-wrap: wrap;
webkit-flex-wrap: wrap;
}
#headerLHS,#headerRHS {
display: flex;
webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;">
<div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div>
<div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
`
Related
I have this for a style:
.flex-row-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flex-row-container > .flex-row-item {
flex: 1 1 25%; /*grow | shrink | basis */
height: 120px;
}
.flex-row-item {
background-color: #fff4e6;
border: 1px solid #f76707;
flex-wrap: wrap;
}
I use this like so:
<div class="flex-row-container">
<div style="width: 25%" class="flex-row-item">component</div>
<div style="width: 50%" class="flex-row-item">VERY LONG TEXT</div>
<div style="width: 25%" class="flex-row-item">component</div>
</div>
The center does not wrap the long text.
The element in the image is styled using absolute positioning but when I resize the screen I have to slightly adjust the positioning of both the 'For Sale' element and the '$400,000' element so I am curious as to if there is a way to achieve the same layout using flexbox?
Here is my attempt (https://codepen.io/ob98/pen/eYVPJLJ)
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
css:
.container{
display: flex;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1{
align-self: flex-start;
}
.item2{
align-self: flex-end;
justify-self: flex-end; /* If align-self moved this to the bottom of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working */
}
Just went to https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self and saw that "In flexbox layouts, this property is ignored (more about alignment in Flexbox)", so I guess that explains why that is not working but I don't really understand why this property is being ignored... Anyway, is there a way to achieve this layout using flexbox or do I have to stick to absolute positioning? Thanks for any input.
Add to .container the declaration justify-content: space-between, to make both your p go to the container edges, and that's done!
.container {
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
justify-self: flex-end;
}
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
Adding justify-content to container and just using the item2 class like this would help.
.container{
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item2{
align-self: flex-end;
}
Can be the answer but im not sure. When i ran it worked.
.bg-flex {
width: 100vw;
height: 100vh;
background-image: url('https://media.istockphoto.com/photos/the-city-of-london-skyline-at-night-united-kingdom-picture-id1312550959');
display: flex;
flex-direction: column;
}
.for-sale {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.k-400 {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
.example {
width: 300px;
height: 100px;
background-color: aqua;
}
<div class="bg-flex">
<div class="for-sale">
<div class="example">
</div>
</div>
<div class="k-400">
<div class="example">
</div>
</div>
</div>
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
I finished my website but I didn't realize that safari doesn't support the flexbox gap. Is there a way around this without having the mess anything up? This is mostly for my media queries.
<div class="social-media">
<a href="https://github.com/">
<img class="social-media__icon" src="img/github.png" alt="Github">
</a>
<a href="https://www.linkedin.com/">
<img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn">
</a>
</div>
.social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8rem;
margin-top: 10rem;
padding-bottom: 2rem;
}
.social-media img {
width: 90px;
height: 90px;
}
#media only screen and (max-width: 400px) {
.social-media {
gap: 3rem;
margin-top: 5rem;
}
.social-media img {
width: 62px;
height: 62px;
}
}
Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})
.social-media > * + * { margin-left: 8rem;}
Here you can read more about the Lobotomized Owl Selector
Edit: Gap is now supported in safari so you should be able to use it no problem.
Property gap with display: flex is not supported by Safar version < 14 https://caniuse.com/flexbox-gap .
You might want to replace display flex with grid:
display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem; /* Safari 12+ */
because grid's gap is supported in older Safari versions: https://caniuse.com/mdn-css_properties_gap_grid_context
The accepted answer has the problem, that you will have a wrong margin on the first element if when there is only one row. Also centered elements will always be 8rem too far the right.
Better solution that will always work with correct spacings:
.container {
display: flex;
// the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
margin: 0 -10px -20px -10px;
}
.box {
min-width: 100px;
height: 100px;
background-color: deeppink;
margin: 0 10px 20px 10px;
}
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
You can remove the gap class and add another one to child elements
<div class="d-flex"> // it was "d-flex gap" previously
<div class="mx-2">
//content
</div>
<div class="mx-2">
//content
</div>
</div>
I think you could make a div container and put justify-content: space-between; then i think it should work
I have this HTML using the new flexbox:
<html>
<head>
<style>
body {
margin: 0
}
div#outer-container {
height: 100%;
}
div#inner-container {
display: flex;
height: 100%;
flex-direction: row;
}
div #left {flex: 1; background-color: yellow;}
div #center {flex: 5; background-color: #fdd;}
div #right {flex: 1; background-color: pink;}
</style>
</head>
<body>
<div id="outer-container">
<div>HEADER</div>
<div id="inner-container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
<div>FOOTER</div>
</div>
</body>
</html>
It expands horizontally fine, but vertically it goes over 100% height because of the header/footer DIVs. How would you get that not to happen?
As it turns out - set the height to 80% and make the header/footer height 5%.
Or you could set the outer-container to display: flex, and get a vertical flexbox container with a horizontal flex box container inside. Then your footer and header can grow and shrink more dynamically than with a fixed height.
Tested in Chrome.
<head>
<style>
body {
margin: 0
}
div#outer-container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: ;
}
div#inner-container {
display: flex;
flex-direction: row;
flex-grow: 2;
}
div #left {flex: 1; background-color: yellow;}
div #center {flex: 5; background-color: #fdd;}
div #right {flex: 1; background-color: pink;}
</style>
</head>
<body>
<div id="outer-container">
<div>HEADER</div>
<div id="inner-container">
<div id="left">tet</div>
<div id="center">tet</div>
<div id="right">test</div>
</div>
<div>FOOTEfeawR</div>
</div>
</body>
</html>