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>
Related
I have the following code in my angular app.
template
<div class="container">
<div class="detail">
<p>{{object.key1}}</p>
</div>
<div class="detail">
<p>{{object.key2}} </p>
</div>
<div class="detail">
<p>{{object.key2}}</p>
</div>
</div>
scss
.container{
width: 50%;
border: 2px solid green;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
The above code nicely arranges the detail div inside the container div.
But the text inside the detail div is going outside.
I can adjust this by giving an height and some padding to detail div, but the number of lines of content is dynamic and unknown and I can not really decide on the height.
Is this because of the unknown amount of content. If so, how can I fit the unknown amount of content(text) that I get from an API inside the flex items.
I could not find any solution online.
Any help would be appreciated.
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.
I'd like to have two columns of equal height and their content should be middle aligned, so in the very center of each div.
Problem: 'equal height' and 'middle aligned' seem to exclude themselves, the one doesn't work with the other.
Question: How can I create a row with two columns with different width, equal height and their content centered in the middle of each column?
<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
<div class="row">
<div class="twelve wide purple column">
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</div>
<div class="four wide red column middle aligned">
<div class="row">Forward</div>
</div>
</div>
</div>
http://jsfiddle.net/kjjd66zk/1/
The key to this layout is to apply equal heights to the primary flex container.
Then make the flex items nested flex containers, which can center the content of the flex items.
Hence, the top level creates the equal height. The second level does the centering.
(See the note at the bottom for more details.)
Here's an example based on your code structure:
body {
height: 300px; /* for demo purposes */
color: white;
}
flex-container {
display: flex; /* primary flex container */
flex-direction: row; /* horizontal alignment of flex items
(default value; can be omitted) */
align-items: stretch; /* will apply equal heights to flex items
(default value; can be omitted) */
height: 100%;
}
flex-item {
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of flex items */
justify-content: center; /* center flex items vertically */
align-items: center; /* center flex items horizontally */
}
flex-item:first-child {
flex: 3; /* consume 3x more free space than sibling */
background-color: #a333c8;
}
flex-item:last-child {
flex: 1;
background-color: #db2828;
}
<flex-container>
<flex-item><!-- also flex container -->
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</flex-item>
<flex-item><!-- also flex container -->
<div>Forward</div>
</flex-item>
</flex-container>
jsFiddle demo
People sometimes consider a flex item and its content to be one element. This is not correct.
The HTML structure of a flex container has three levels:
the container
the item
the content
Therefore, the content inside an item does not represent the item; it represents a separate element.
If the content inside an item is text, it becomes an anonymous element.
From the flexbox spec:
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
That's why, in the solution above, the flex item becomes a flex container. It enables the use of flex properties on the children of the flex item (the content).
You need to give height to your elements
.height {
height: 300px;
}
.row {
height: 100%;
}
.row > div {
height: 100%;
}
Updated fiddle 1
If you want them to center vertical, update above .row > div rule to this
.row > div {
height: 100%;
display: flex !important;
flex-direction: column;
justify-content: center;
}
Updated fiddle 2
(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)
Is it possible to align elements horizontal and vertical in a flexbox container?
So you have your html like this:
<section class="flex-container">
<article class="project--vertical project1"></article>
<article class="project--vertical project2"></article>
<article class="project--horizontal project3"></article>
<article class="project--horizontal project4"></article>
<article class="project--horizontal project5"></article>
</section>
An example (that doesn't work yet) can be found at: http://codepen.io/JordyPouw/pen/MYJOde
cross-axis alignment is done with the align-items property. justify-content is used for aligning along the same axis. It sounds to me like, in your case, you just need to use both of those properties, and set the value to center:
.flex-container {
padding: 20px;
display: flex;
-webkit-flex-flow: row wrap;
justify-content:center;
align-items: center;
}