I have currently the following definition:
<div class="div-container">
<mat-icon>new_release</mat-icon>
<span> </span>
<a><span>VO/YI/AI 1 HJ.2022a;</span></a>
<span> </span>
<a><span>ABC/BBC/VOA 7.2022;</span></a>
<span> </span>
<a><span>UN/AIDA 16.8.2022</span></a>
</div>
with
.div-container{
display: flex;
align-items: center;
}
a{
display: inline!important;
}
which results in a display like
What I would like to have is the image on the left side and than floating text, e.g.
VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 7.2022; UN/AIDA 16.8.2022
or if the space is too less on the left side the icon and something like
VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA
7.2022; UN/AIDA 16.8.2022
Honestly don't know if the flex is required or not. But the icon should be positioned vertically centered on the left.
you don't need the empty spaces and if you want to add space, you can use margin for your elements.
.div-container{
display: flex;
flex-direction:row;
align-items: center;
flex-wrap:wrap;
}
<div class="div-container">
<mat-icon>new_release</mat-icon>
<a><span>VO/YI/AI 1 HJ.2022a;</span></a>
<a><span>ABC/BBC/VOA 7.2022;</span></a>
<a><span>UN/AIDA 16.8.2022</span></a>
</div>
Related
I'm trying to create a layout so that when I click on "See More" to expand the text of one container, the surrounding containers remain in the same position.
There are three containers and each container has two wrappers, a top which contains the title and bottom which contains the image, text and button. I don't know what the length of the titles will be beforehand, so in order to make sure that the boxes, text and button line up, I've given each container justify-content: space-between so that the bottom wrappers always align.
The issue arises after clicking "See More", where the bottom wrapper of each container moves down to fit the height of the container.
.main-container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="main-container">
<div class="container">
<div class="top-wrapper">
<div class="title">
TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
</div>
</div>
<div class="bottom-wrapper">
<div class="image-text-wrapper">
<div class="image-container">
<img class="image" src="https://dummyimage.com/200x200/000/000">
</div>
<div class=“text” id="text">
{{ text }}
//See More code
</div>
</div>
<button>
BUTTON 1
</button>
</div>
</div>
<div class="container">
//second container code
<div>
<div class="container">
//third container code
<div>
</div>
Should I be using a table or is there a simple CSS fix to this?
You can find the full code here: Plunkr
Try adding the following to your .container class:
.container {
align-self: flex-start;
}
The align-self property allows you to override the setting for align-items that is controlling your flex items' alignment.
And adding the following to the .title class:
.title {
min-height: 50px
}
You may need to play around with this setting, but it prevents the image from rendering without any space between it and your title.
Caveat: the CSS you included here in your post isn't exactly what I got when I opened your Plunkr link -- the .container didn't have display: grid; set, but I think this should work nonetheless.
How do you make floated elements stop floating on overflow? I'm trying to have something like this:
When the browser is fully maximized the two elements are meant to line up like this:
|span| |span|
But when the browser re-sized to the point where the elements are touching this should happen:
|span|
|span|
I've tried doing it with floating like:
<div class="border px-3">
<span>December 6th, 2020</span>
<span class="float-right">This is some example text right here</span>
</div>
But when I resize I get
|span|
|span|
This is what you want, but using flex rules. And exactly:
display: flex - sets flexibility;
justify-content: space-between - distributes blocks evenly throughout the free space;
flex-wrap: wrap - sets the transfer of blocks when narrowing the browser window.
.border {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
<div class="border px-3">
<span>December 6th, 2020</span>
<span>This is some example text right here</span>
</div>
You can use some flexbox properties,
.my-container{
display: flex;
flex-wrap: wrap;
width: 100%;
}
.first{
flex: 1 0 auto;
}
.second{
flex: 0 0 auto;
}
Corresponding HTML Code
<div class="my-container">
<span class="first">December 6th, 2020</span>
<span class="second">There is some example text here</span>
</div>
I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the vertical-align CSS property. But the vertical-align property doesn't work.
I tested it with different approaches and in the end one solution worked. But then the justify-content property is not working anymore. in my attempt i used for the property: flex the webkit version: -webkit-box.
Here is the snipped in a fiddle if you want to test it: https://jsfiddle.net/oe3hxfma/
.calculation {
display: flex;
justify-content: center;
font-size: 1.3em;
}
.exponent {
display: inline;
vertical-align: super;
}
.calculationTwo {
display: -webkit-box;
justify-content: center;
font-size: 1.3em;
}
<div class="calculation">
3
<div class="exponent">
2
</div>
</div>
<div class="calculationTwo">
3
<div class="exponent">
2
</div>
</div>
How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.
The vertical-align property works only with inline-level and table-cell elements (MDN).
Because the exponent element is a child of a flex container, it is automatically blockified (spec). This means it computes to a block-level element and vertical-align is ignored.
It doesn't matter how you define the display value for the flex item (e.g., in your code you have the flex item set to display: inline). In a flex formatting context, the display value of flex items is controlled by the flex algorithm.
The key to using vertical-align is to remove it from a flex formatting context. Create an element that is a child of the flex item. Now the exponent value is outside the scope of flex layout, and you can set it to display: inline.
Also, because the text is aligned to the top of the container, there is no space for vertical-align: super to work. So align the text to the center or bottom of the container.
Add align-items: flex-end or center (depending on how much superscripting you want).
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You should use "align-items" property to align items in vertical position:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align
just a suggestion, why don't you try to use sup HTML Tag for exponential?
<div>
3 <sup>2</sup>
</div>
and for vertical alignment, display:flex use align-items like in above answers.
div
{
display: flex;
justify-content: center;
}
<div>
3 <sup>2</sup>
</div>
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>
You could try give the content some padding and use the align-items: stretch feature of flex.
Here is a very useful guide to flex! It's awesome to keep it in your back-pocket as a front end developer!
Flexbox Guide!
I have some weird behavior going on in my divs at the moment, each div is written like the other (they are just mirror images). The text is mimicking columns and is setting side by side instead of top to bottom like it should. The oddest thing is, it seems to be working fine on another page this particular page only contains the behavior.
The code is something like this
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
<style>
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
}
</style>
I've taken this apart piece by piece in the inspector tool and I'm even more baffled as to why it works fine on one page and not at all on another. The last section uses the same css layout it just contains a different picture and text. Can anyone tell me how to fix this? BONUS POINTS IF YOU CAN TELL ME WHY.
The first thing to keep in mind is that flex layout applies only between parent and child elements. Descendants in a flex container beyond the children do not participate in flex layout.
In your "broken page", the four side-by-side paragraph elements are children of a flex container (.tours-sec-3-p2-wrap).
.tours-sec-3-p2-wrap {
padding: 2%;
align-items: center;
display: flex;
background-size: 15%;
padding-top: 0;
background-position: 0px 30%;
background-repeat: no-repeat;
}
An initial setting of a flex container is flex-direction: row, so the children (flex items) are lining up in a row. The quick and easy solution is to override the default with flex-direction: column.
In your "working fine" page, the image and paragraphs are not children of a flex container. These elements are children of a block container, and that container is the child of the flex container.
Your image and text are being aligned with float, not flex, properties.
If you want to use flex properties, add display: flex to the parent element.
Despite anyone's belief, the layouts of each section are exactly the same. They are generated with the cms, they are not static pages.
That said, the behavior was only different between the 2 because of the length of the content in each flex container. Adding the same content to the tours page created the same behavior.
The problem was indeed solved with flex-direction: column; and additionally adding justify-content: center;
If you don't want to use flex-direction: column; you can make your elements stretch to 100% width to force the wrap.
.flex-wrap{
display:flex;
flex-wrap:wrap;
}
.flex{
display:flex;
align-items: center;
flex-wrap:wrap; /* added */
}
.flex,
.flex h3,
.flex p
{
width: 100%;
}
<div class="flex-wrap">
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
<div class="flex">
<h3>A title</h3>
<p>some text</p>
</div>
</div>
Bonus Tip for justify-content: center and text aligning left after wrapping. (run the code snippet)
.flex-wrap{
display:flex;
flex-wrap:wrap;
flex-direction: column;
}
.flex {
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.text-centered {
text-align: center;
}
<div class="flex-wrap">
<div class="flex">
<h3>Centered (but it hasn't wrapped)</h3>
<p>centered text</p>
</div>
<div class="flex">
<h3>Not Centered (after wrap)</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
<div class="flex text-centered">
<h3>Centered</h3>
<p>sometimes you'll want to use justify-content: center; and keep the text centered along with whatever other elements are inside the div. You'll see in the 2nd example the text aligns left after it wraps. Add text-align: center; and it will center the text.</p>
</div>
</div>
(sorry for bad english)
I want to center everything in the div "center" (like imgs and text...) with CSS
<div id="123">
<div id="center">
<img>
<p>
...
</div>
</div>
You can do this:
CSS
#center{
display: flex;
justify-content: center;
align-items: center;
}
DEMO HERE
If you mean horizontal centering u can do it in 2 rules simple rules:
Inline Element - text-align-center (paragrafs,headings,images)
Block Element- margin:0px auto; (divs)