I'm trying to move around text with justify-content with flex box and whilst align-items works to move the content vertically, justify-content doesn't work to move the content horizontally.
I know I can use text-align, however I don't like how it moves all the text to the far right including the sub-title text, which I want to start at the same place as the title does - I believe this would be what justify-content would do.
CodePen: http://codepen.io/gutterboy/pen/yYxmLP
HTML:
<div id="main-slider" class="carousel">
<div class="container">
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="carousel-inner" role="listbox">
<div class="item item1 active">
<img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
<div class="item item2">
<img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>
CSS:
.item {
position: relative;
.details {
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
padding: 25px;
color: #fff;
z-index: 2;
align-items: flex-end;
justify-content: center;
h2 {
margin-top: 0;
}
}
&.item2 {
.details {
align-items: flex-start;
justify-content: flex-start;
}
}
}
.fix-flex {
width: 100%;
}
.flex-row {
display: flex;
flex-flow: row nowrap;
}
There is more CSS related to the code, but it's related to bootstrap.
The issue you are having is due to your fix-flex class. It has a width of 100%. It is being centered with justify-content:center but since the element is the same size of its container it is not visually obvious that it is working. Check out my fork of your codepen.
Fork of your codepen
This should be removed
.fix-flex {width:100%;}
After reading #paulie_D's comments I realised it had to do with the fix-flex class which had a style of width: 100%; set and was wrapped around the content I was trying to justify and hence it really couldn't move it.
This was also pointed out by Adrian Eufracio's answer; however removing the div altogether would cause the issue I was trying to prevent; so I had to leave the div in the code but just remove the width: 100%; from the styles and I can now justify the content and the text doesn't wrap.
CodePen: http://codepen.io/gutterboy/pen/jbeOrP
HTML:
<div id="main-slider" class="carousel">
<div class="container">
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="carousel-inner" role="listbox">
<div class="item item1 active">
<img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
<div class="item item2">
<img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>
CSS:
.item {
position: relative;
.details {
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
padding: 25px;
color: #fff;
z-index: 2;
align-items: flex-end;
justify-content: center;
h2 {
margin-top: 0;
}
}
&.item2 {
.details {
align-items: flex-start;
justify-content: flex-start;
}
}
}
.flex-row {
display: flex;
flex-flow: row nowrap;
}
Related
I'm making the display of items using bootstrap's carousel, and my item blocks use the box-shadow attribute, however this property is limited by the parent element that wraps it.
Is there a way for my shadow to remain fully visible? hope to get help from everyone <3
my code:
<div class="partner container">
<div class="partner-title">
<h5>{{ setLang("title") }}</h5>
<h2>{{ setLang("titleSecond") }}</h2>
</div>
<div
id="carouselExampleIndicators2"
class="carousel slide"
data-ride="carousel"
data-pause=false
>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="partner-logo" id="show-slide">
<div
class="logo-com"
v-for="(item, index) in partners"
:key="index"
>
<img :src="`${assetsPath}${item.url}`" alt="" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="partner-logo" id="show-slide">
<div
class="logo-com"
v-for="(partner, index) in partners"
:key="index"
>
<img :src="`${assetsPath}${partner.url}`" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
My Style:
.partner-logo {
display: flex;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
padding: 20px 0;
}
.logo-com, .logo-com img {
display: flex;
align-items: center;
}
.logo-com {
background: #fff;
box-shadow: 0 15px 94px rgb(0 56 139 / 13%);
border-radius: 20px;
height: 134px;
width: 265px;
margin-top: 23px;
justify-content: center;
}
give some padding into the pareent or
give margin into items,
or just put overflow: visible in the parent element style
i have one div and three child div, check out the code below
<div class="parent">
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
</div>
each child tag composed of icontag and texttag and text tag is of dynamic height.
but, each icon tag margin must be same, even if text tag height is different.
for more explanation, refer to the picture.
as the above picture, the last text is multiline. so, last child tag height is diffent from other tags.
how can I do that?
Here is an example with grid and flexbox.
Try this, it might fit your needs
.child {
display: flex;
align-items: center;
}
.parent {
display: grid;
grid-template-rows: 33% 33% 33%;
}
.child .icon {
border-radius: 50%;
border: 1px solid blue;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.child p {
max-width: 100px;
}
.wrapper {
display: flex;
align-items: center;
}
.same {
margin-right: 30px;
}
<div class="wrapper">
<p class="same">Same height</p>
<div class="parent">
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
</div>
</div>
Try adding max-height to all child div..
.child {
--
--
max-height: 300px; // give max height as per your design
overflow-y: auto;
}
You can use display: flex on child items and align-items: center to vertically center the content.
Then use padding property (or margin could work as well) to have some space between .child items as in the following snippet.
.child{
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
padding: 15px 0;
}
.icon{
width: 30px;
height: 30px;
border-radius: 100%;
border: 2px solid #0000ff;
display: flex;
align-items:center;
justify-content: center;
margin-right: 15px;
}
.text{
flex: 1;
}
.child.third .icon{
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child first">
<div class="icon">1</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child second">
<div class="icon">2</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child third">
<div class="icon">3</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
<div class="child fourth">
<div class="icon">4</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
</div>
But note that, if the texts are much longer than the icons, it could break the layout and you need to give static height to child items. But this way texts may overlap.
Try this :
<div class="parent">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
</div>
You can set padding for child class.
padding: 10px;
I'm using Zurb Foundation 5 with the equalizer component. When I have three equal columns I want the center column content (text) to be vertical centered and the right column content (image) to be vertical bottom aligned.
Is there a proper or good way to do this and still maintain the responsive features?
<div class="row" data-equalizer>
<div class="large-5 small-12 columns" data-equalizer-watch>
<img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />
</div>
<div class="large-4 small-12 columns" data-equalizer-watch>
<p class="subhead">Middle Text</p>
<ul>
<li>
One
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="large-3 small-12 columns " data-equalizer-watch>
<img src="~/Content/Images/Bottomlogo-400.gif" />
</div>
Try using the below snippet
.wrapper {
height: 200px;
padding: 20px;
border: solid 1px #000;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.columns {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.large-5 {
align-self: flex-end;
}
.large-4 {
align-self: center;
}
<div class="wrapper">
<div class="row" data-equalizer>
<div class="large-5 small-12 columns" data-equalizer-watch>
<img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />
</div>
<div class="large-4 small-12 columns" data-equalizer-watch>
<p class="subhead">Middle Text</p>
<ul>
<li>
One
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="large-3 small-12 columns " data-equalizer-watch>
<img src="~/Content/Images/Bottomlogo-400.gif" />
</div>
</div>
I'm trying to create a page where I have image 1 on top and the text at the bottom and image 2 at the bottom and the text on top. I'm not sure how to go about doing it this way.
In my JSFIDDLE I would like "Text 1" to be at the bottom. "Text 2" on top and "Text 3" at the bottom.
my html
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
JSFIDDLE
This should help you get started. You can use flex and pseudo-properties to achieve this.
.gallery_wrapper {
display: flex;
}
.gallery {
background: #333333;
}
.gallery:nth-child(even) {
display: flex;
flex-direction: column-reverse;
}
.gallery_title {
color: #fff
}
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
</div>
You can use flexbox for your requirement.
In flexbox there are two properties with which you can solve your issue. Either using order or using flex-direction. But flex-direction is for parent and order is for child. So you can use any of the properties to solve your problem.
In this example snippet, I use order.
.item {
display: flex;
flex-direction: column;
}
.text {
font-size: 20px;
}
.image {
display: flex;
width: 200px;
height: 200px;
background-image: url('https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.item:nth-child(2n) .text {
order: 2;
}
<section>
<div class="item">
<span class="text">Text 1</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 2</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 3</span>
<span class="image"></span>
</div>
</section>
You can add the following CSS to achieve this.
.gallery{
position: relative;
}
.gallery_title{
position: absolute;
bottom: 5px;
left: 0;
}
.gallery:nth-child(even) .gallery_title{
bottom: auto;
top: 5px;
}
Check the link here jsfiddle
I can't seem to get this flex + overflow combination working in Safari.
JSFiddle: https://jsfiddle.net/9dtrr84c/2/
<div class="container-fluid">
<div class="row parent">
<div class="col-12 col-sm-7 left">
<div class="row top">
<div class="col">Top</div>
</div>
<div class="row bottom">
<div class="col-sm-7 my-list-container">
<ul class="list-group">
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
</ul>
</div>
<div class="col-sm-5 flex-end">
This should be flex end
</div>
</div>
</div>
<div class="hidden-xs-down col-sm-5 right">
</div>
</div>
</div>
And css:
/* With bootstrap v4 */
/* https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */
html,
body,
.container-fluid,
.parent {
height: 100%;
}
.dummy-item {
height: 300px;
}
.left {
display: flex;
flex-direction: column;
}
.left .top {
flex-shrink: 0;
}
.left .bottom {
flex-shrink: 1;
flex-basis: 100%;
display: flex;
}
.my-list-container {
overflow-y: auto;
}
.flex-end {
align-self: flex-end;
}
The list should expand to take as much space as possible and overflow with a scrollbar.
This works in Chrome as expected. Doesn't seem to be a "flex not supported in this version of Safari" as I am using 10.1.2. I don't require old browser support so a modern solution is acceptable
Any help is appreciated! Many thanks in advance!
Managed to solve it: https://jsfiddle.net/9dtrr84c/8/
Added flex-wrap: nowrap; to parent container