I have the following HTML:
<div class="icon-box">
<div class="icon">
<svg>...</svg>
</div>
<h3>Title here</h3>
<p>Lorem ipsum dolor...</p>
</div>
My CSS:
.icon-box {
display: flex;
}
The result:
How can i get the following using flexbox without changing the HTML:
I am trying to align the icon to left and the heading and paragraph to its right on the same column. Without changing/adding new HTML.
Try using flex-direction: column; on main parent and regular display: flex; (flex-direction: row;) on the child of parent.
.icon-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon {
display: flex;
gap: 10px;
}
<div class="icon-box">
<div class="icon">
<img src="https://dummyimage.com/50/000000/f2009d&text=SVG">
<h3>Title here</h3>
</div>
<p>Lorem ipsum dolor...</p>
</div>
Related
I'm trying to pass the last two items over each other as shown on the bottom of this photo.
Is this possible as is by forcing a line break or do I have to change the display of the parent div?
The HTML structure looks like this :
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
<a><img width="150" height="150"></a>
</li>
</ul>
</div>
Et voici le CSS que j'ai essayé :
ul.articleslisteshp{
display: flex;
flex-direction: column;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: row-reverse;
}
I would take out the a tag from inside the list if possible and put it outside of it. Like so:
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<a><img width="150" height="150"></a>
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
</li>
</ul>
</div>
And use the following CSS to achieve what you asked for:
ul.articleslisteshp{
display: flex;
flex-direction: row;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: column-reverse;
}
span.testcat {
display: flex;
flex-direction: column;
}
I am having trouble getting long-string text to wrap &/or show ellipsis. It's kind of like a table, but really it's 2 columns with rows.
I have tried messing around with the .line-flex and the .long-text-maybe classes, but no success.
Is there some sort of conflict between the grid wrapper & flex contents?
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>
You have to call directly to the children containing the text elements for ellipsis to take effect. Check out the CSS changes I made.
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-flex > p, a {
text-overflow: ellipsis;
overflow: hidden;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>
You will have to use flex-wrap: wrap; to get your text to wrap automatically. This includes getting rid of the white-space: nowrap; on your line-flex so that the text can wrap.
See here:
.box {
width: 50%;
}
.gridwrapp {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.line-flex {
display: flex;
align-items: center;
overflow: hidden;
flex-wrap: wrap;
}
<div class="box">
<div class="gridwrapp">
<div class="line-flex">
<p>Reservation ID: </p>
<p class="long-text-maybe">982398</p>
</div>
<div class="line-flex">
<p>Item Name: </p>
2020 Ram Promaster 1500 HR 136 WB Custom
</div>
<div class="line-flex">
<p>Name: </p>
<p class="long-text-maybe">Kim Bob</p>
</div>
<div class="line-flex">
<p>Location: </p>
<p class="long-text-maybe">Really long name in a place far far away</p>
</div>
</div>
</div>
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 need help horizontally aligning child elements in parent flex boxes.
The layout below shows a flex container (".parent") showing 4 parent containers (".child"):
Please take a look at this flexbox graphic
(I can't show my actual project so I mocked it up in Illustrator.)
The green box (top) represents a variable text headline (max 3 lines).
The blue box (second one down) represents an image with fixed height and width(I want these images to be aligned on top).
The yellow box represents a paragraph of varying copy.
The purple box on the bottom is another fixed-height flex box.
I have the following code (in LESS):
.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-flow: wrap;
flex-wrap: wrap;
.child {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex:1;
flex:1;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
-webkit-align-content: space-around;
align-content: space-around;
.green {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.blue {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.purple {
-webkit-flex: 1;
-ms-flex:1;
flex:1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.yellow {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
}
EDIT - and here's the HTML code:
<section class="parent">
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
</section>
With Bootstrap 3.3.6 I want to make 3 cards.
<div class="row">
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
</div>
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
}
Now that the Dummy text is not the same length, the cards will not be the same height.
I found a trick using flexbox here: How can I make Bootstrap columns all the same height?, but this will be working on the immediate children of the .row not the .card
Another thing, even if the cards will be the same height, the buttons will not be on the same line as they will follow the the text.
There is no CSS property that can align items in different elements to one another...not even in flexbox.
You could always make the button be at the bottom though...that's just a matter of making the card 100% height of the equal height columns.
.row.flex {
display: flex;
}
.row.flex .col-md-4 {
float:none;
width: 33.3333%;
background: pink;
display: flex;
flex-direction: column;
}
.card {
font: 100%;
flex:1;
border:1px solid grey;
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
align-self: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex">
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
<button>Click Here</button>
</div>
</div>
<div class="col-md-4">
<div class="card">
<p>Some dummy text here</p>
<button>Click Here</button>
</div>
</div>
</div>
For some reason, this doesn't work in the Snippet but here's a Codepen.
Codepen Demo
You should remove your card div and set your card class with the col-md-4
And from that you can put the same height with flexbox like that
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.card {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}