I've recently starting using flexbox and this is the first problem I've run into. I want my .wrp class below to remain display: inline-block; but one line seems to disable this value. That line is: flex-direction: column. When I remove that line my .wrp class starts behaving like an inline-block element again but then of course it loses it's flex-direction value. Is there a simple solution that doesn't require restructuring my HTML too much to keep the flex-direction behavior of flexbox but also keep the inline-block behavior on .wrp?
.contr {
display: flex;
flex-direction: column; /* this line seems to be breakig my display on .wrp */
justify-content: center;
height: 10rem;
background-color: #eee;
}
.wrp {
display: inline-block;
height: 5rem;
background-color: #ddd;
}
p {
width: 100%;
background-color: #ccc;
}
<div class="contr">
<div class="wrp">
<p>I want this paragraph to stretch to fit it's content. Not full width.</p>
</div>
</div>
You can't have an inline-block element within a flex. It looks like you may be looking for display: inline-table:
.contr {
display: flex;
flex-direction: column; /* this line seems to be breakig my display on .wrp */
justify-content: center;
height: 10rem;
background-color: #eee;
}
.wrp {
display: inline-table;
height: 5rem;
background-color: #ddd;
}
p {
width: 100%;
background-color: #ccc;
}
<div class="contr">
<div class="wrp">
<p>I want this paragraph to stretch to fit it's content. Not full width.</p>
</div>
</div>
Hope this helps! :)
Related
<div class="parentdiv">
<div><img src="img/noimage.png"></div>
<div class="bottom">
<p class="text1">Text1</p>
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
I've barely managed to make this layout with bunch of floats, margins, tops and lefts but the layout breaks at practically any other screen ratios.
I feel that I shouldn't be spamming float and margins when creating a layout. Are there any better options to build such layout that does not break catastrophically on ratio change?
I've tried googling but what I've found was mostly making asingle div or image responsive which I've succeeded, but can't apply it to my layout.
Try this out and see if you understand whats going on. I will also add a Tutorial for CSS-Flex as a link at the bottom. Make sure that you always post the code you have, that means HTML and CSS for a CSS Question etc. Im just answering directly here cause your Question implies, that you just tried floats. This solution here probably requires you to change some things to perfectly fit, so you can practice a bit with it:
body {
width: 100vw;
height: 100vh;
/*We need a fixed height and width of the parent-Element to make % values work in the child elements*/
}
.parentdiv {
width: 100%;
/*Careful, when your Content inside of this gets close to the maximum width and height of this div you need to change width: 100% or the layout will overflow*/
padding: 25px;
height: 50%;
/*This makes the Element a Flexbox-Element*/
display: flex;
/*sets the direction and the behaviour*/
flex-flow: row nowrap;
}
.left-area {
width: 40%;
display: flex;
flex-flow: row nowrap;
/*the following 2 attributes define where the content is positioned inside the Flexbox-element*/
justify-content: start;
align-items: start;
}
.left-area img {
width: 6rem;
height: 6rem;
/*I used the border to make the Img Look like yours cause i dont have the file*/
border: 1px solid grey;
border-radius: 50%;
}
.text1 {
font-size: 1.5rem;
color: grey;
font-weight: bold;
}
.right-area {
width: 15%;
height: 50%;
display: flex;
/*Column-Reverse means that you have a column but you start at the bottom of it, like it is standing on its head*/
flex-flow: column-reverse nowrap;
}
.btn_area{
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.text2 {
font-size: 1.2rem;
color: #7ad0bc;
font-weight: bold;
}
.text3 {
font-size: 1.2rem;
color: #d96060;
font-weight: bold;
}
<div class="parentdiv">
<div class="left-area">
<img src="img/noimage.png" alt="no image available">
<p class="text1">Text1</p>
</div>
<div class="right-area">
<div class="btn_area">
Text2
Text3
</div>
</div>
</div>
Tutorials for CSS-Flex: Tutorial Help-sheet
I've started learning flexbox recently and tried doing some exercises to practice but I got stuck because the container for h1 is a lot bigger than it needs to be, even if margin and padding are 0, and it makes the whole other page uncentered.
main {
display: flex;
justify-content: center;
background-color: #cacaca;
height: 100vh;
flex-flow: row wrap;
}
h1 {
margin: 0;
padding: 0;
}
#container {
margin-top: 100px;
}
<main>
<h1>Here are some nice pics</h1>
<div id="container"> ... </div>
</main>
It's because default value of align-items is stretch which makes all flex items to stretch to full height of their parent. if you give align-item: flex-start to use only required height.
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
}
h1 {
background: red;
}
<main>
<h1>Here are some nice pics</h1>
<div id="container">Container</div>
</main>
I want to center 4 boxes at the center of a page, i.e., they should be vertically centered and horizontally, one box should be at extreme left, one at extreme right and the left ones should be placed horizontally between the extreme ones.
I know that such a question have been asked before, but I am not getting the exact logic of the solution. Can someone please give a proper explanation for the same? Thanks a lot.
Here's the HTML code-
.cards div{
height: 200px;
width: 200px;
float: left;
text-align: center;
margin-left: 100px;
}
.card_1{
background-color: green;
}
.card_2{
background-color: blue;
}
.card_3{
background-color: yellow;
}
.card_4{
background-color: red;
}
<html>
<head>
<link rel="stylesheet" href="second.css">
</head>
<body>
<div class="cards">
<div class="card_1">
</div>
<div class="card_2">
</div>
<div class="card_3">
</div>
<div class="card_4">
</div>
</div>
</body>
</html>
Here is a solution using flexbox:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.cards {
width: 100%;
height: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.cards div {
height: 200px;
width: 200px;
}
.card_1 {
background-color: green;
}
.card_2 {
background-color: blue;
}
.card_3 {
background-color: yellow;
}
.card_4 {
background-color: red;
}
More information about flexbox:
A Guide To Flexbox
Flexbox Froggy
JSFiddle
Edit
The secret to this solution is
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
display: flex; instructs the browser to use a flexbox layout when rendering your container element. flex-direction: row; renders all children of the container in a row. align-items: center; vertically centers the children of the container. And finally justify-content: space-between; spaces each child of the container with equal space in between each.
Flexbox is a powerful layout system. I would recommend learning more about it through SO or the provided links.
Keep in mind that flexbox is supported across all major browsers but IE 11 has limited support due to several bugs.
I'm new to css and even newer to flex.
I couldn't find an answer, so I started a new one..
I have the following container and item:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
color: rgb(51, 51, 51);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This way I get 2 items on both sides (one left and one right).
I would like to know how to do the following:
The left item, will be on the left as before. From the point it ends, to the point the container ends - I with the right element to be centered.
The left item, will be on the left as before. The right item will be 10px left from the right end of the container.
Thanks!
The solution to this problem is using nested flexboxes. Get rid of the display: block; on .item - you can't mix flex and block display rules like that.
What you want to do is set up series of containers:
one top level flex container
two equally sized flex containers inside of the the top level container
Markup will look like this:
<main class="container">
<section class="left-container">
<div class="item"></div>
</section>
<section class="right-container">
<div class="item"></div>
</section>
</main>
In the CSS layer, you give the top-level .container flex and then justify-content: space-between which pushes the containers to the sides.
.container {
display: flex;
justify-content: space-between;
}
In the two nested containers, you need to make them both display: flex; as well. Now you can control the positioning of your .item elements like you want. align-items: center controls the vertical axis so .left-container gets only that positioning while the right container gets justify-content: center; to control the vertical alignment.
.left-container {
background-color: darkgray;
display: flex;
align-items: center;
height: 200px;
width: 50%;
}
.right-container {
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 50%;
}
Styling on the item is pretty simple - I just gave height and width for demo purposes. They aren't necessary. If you want to do precise tweaks, use margin on .item to push slightly from these standards.
.item {
background-color: red;
height: 100px;
width: 100px;
}
Codepen:
https://codepen.io/staypuftman/pen/PmLyNM
I'm using flex box to align two items to left and right of the container, while vertically centre-aligning them. Here's a very simple example of what I'm trying to achieve.
HTML:
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
CSS:
.container {
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.first {
background-color: yellow;
width: 200px;
height: 100px;
}
.second {
background-color: blue;
width: 200px;
height: 100px;
}
Here's the jsfiddle of the example.
This works perfectly well if the screen is wide enough to fit both internal divs on one row. However when the screen size is small (e.g. a mobile phone) and the divs wrap onto the second line, the second one also becomes aligned to the left side (i.e. flex-start). How can I force the second div to always be aligned against the right border, regardless of whether it's on the first row or wrapped onto the second one?
EDIT: In the example, I assigned fixed width to the two child elements - this is for simplicity only. In the real life application, all widths are dynamically changing based on the content read from the database at run-time. Hence, any solution that's based on fixed sizes will not work.
You can try adding some left margin to push your .second element to the right:
.second {
margin-left: auto;
}
.container {
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.first {
background-color: yellow;
width: 200px;
height: 100px;
}
.second {
background-color: blue;
width: 200px;
height: 100px;
margin-left: auto;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
Or, similarly, justify all elements to the right but push .first element to the left:
.container {
justify-content: flex-end;
}
.first {
margin-right: auto;
}
.container {
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.first {
background-color: yellow;
width: 200px;
height: 100px;
margin-right: auto;
}
.second {
background-color: blue;
width: 200px;
height: 100px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
</div>
I found a solution but it is rather "hacky" in nature (see demo here, explanation later), in the sense that it requires you to explicitly know the width of the parent container which will trigger a layout change based on #media.
The reason why your code is not working is because of the confusion over how align-self works. In the flexbox model, "align" refers to alignment along the cross-axis (i.e. in a conventional sense of a "row" layout direction, that will refer to vertical alignment), while "justify" refers to alignment along the main axis (i.e. the row). To better explain my point, I hereby attach an image made by Chris Coyier from his flexbox guide:
Therefore, align-self: flex-start means telling the .first to align to the top of the container, and align-self: flex-end means telling .second to align to the bottom of the container. In this case, since you have not declared an explicit height for the parent, the parent will take on the height of its tallest child. Since both .first and .second are 100px tall, the parent will also have a computed height of 100px, therefore making no difference in the alignment (because both with be flush with the start and end of the cross axis).
A hack would be switching the flex-direction to row, with the following restrictions: You know how wide your container will be, or the explicit widths of its children. In this case the breakpoint will be at 400px, where .first and .second will intersect each other.
.container {
width:100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.first {
background-color: yellow;
width: 200px;
height: 100px;
align-self: flex-start;
}
.second {
background-color: blue;
width: 200px;
height: 100px;
align-self: flex-end;
}
#media screen and (max-width: 400px) {
.container {
height: 200px;
}
}
Then again, here is a proof-of-concept fiddle, modified from your original one: http://jsfiddle.net/teddyrised/cncozfem/2/