I have a container that uses flex-direction: row and I would like to keep it that way the only problem is that now I want to put something under a div without having to nest it in.
This is what I have.
And I would like to do something like this:
My main_continer css looks something like this:
main_container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: row;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
text-align: left;
.div_2 {
width: 90%;
}
Is it possible to override flex direction row some way?
Add the ability for the flex items to wrap:
.main_container {
// ...rest of styles
flex-wrap: wrap;
}
Then override the order for that second item, making it come after the fourth item:
.div_2 {
order: 4; // default is 0, you might need to play with this value
}
Last make sure the items layout 3 across, add some new class to all the items in the flex container so you can target them together:
.new_class_on_all_items {
width: 33.333%;
}
Related
i have problems with the setup of the buttons. I'm unsure if i need a grid system or not?
I want it to look like this example:
No code yet as i am unsure of where to start, and what to start with.
If somebody can help then hanks in advanced!
You can use with flex, justify-content, align-items like example below:
.wrapped {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
}
.avatar {
width: 50px;
height: auto;
}
button {
width: 200px;
}
.div1 {
display: flex;
justify-content: center;
padding: 10px;
}
.div2 {
display: flex;
flex-direction: column;
padding: 10px;
}
.div2 button{
width: 200px;
margin: 6px;
padding: 5px;
}
.div3 {
display: flex;
padding: 10px;
margin-left: 0px;
align-items: center;
}
.div3 button {
width: 40px;
height: 30px;
margin-left: 160px;
}
.bell {
width: 30px;
padding: 10px;
flex-basis: 1000px;
}
<section class="wrapped">
<div class="div1">
<button>At campus</button>
<img class="avatar" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&m=1300845620&s=612x612&w=0&h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" />
</div>
<div class="div2">
<button>Q & A</button>
<button>Klasser</button>
<button>Grupper</button>
<button>Chat</button>
</div>
<div class="div3">
<img class="bell" src="https://www.iconpacks.net/icons/1/free-bell-icon-860-thumb.png"/>
<button>Help</button>
</div>
</section>
for sure a grid would perfectly work for your design. However,you don't explicitly need a grid to obtain that result. Css flexbox display (display:flex) would also work and maybe fit your needs. Even display: block would work.
If you need a web layout that only consists of rows or columns, then Flexbox is the best model to use. However, if you have a complex, multi-row and multi-column layout, then you'll want to use CSS Grid.
Have a look for more details: https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/
Here is a simple set-up for your design with flexbox in mind:
Suppose your first component (logo and user profile) are inside one div. You can use display:flex and flex-direction: row to display them in one line, and justify-content: space-between so the elements fill the entire row.
Then you have 4 buttons. You can use another div and set the flex-direction to column. Change the width of the div and of the buttons as you need.
Basically, the last div would be similar to the first one.
For each div you can specify different width or height.
In my project I have two columns, each with their own mat-accordion which holds some mat-expansion panels.
When I click to open any one of the expansion panels, it is moving the opposite column downwards.
Here is the CSS. Basically, the "row" holds the two columns, which hold the accordions.
.row {
padding-top: 120px;
padding-left: 25px;
padding-right: 25px;
flex-flow: row wrap;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
.column {
flex-direction: column;
box-sizing: border-box;
display: flex;
flex: 1 1 50%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
max-width: 50%;
}
.mat-expansion-panel {
background: rgba(0, 0, 0, 0.7);
width: px;
margin-bottom: 1.5rem;
}
.mat-expansion-panel-header {
height: 150px;
font-family: Gotham HTF;
font-size: 26px;
justify-content: space-between;
text-align: center;
}
I would like the opposite column to be held in place if it is not being clicked.
Is there a way to keep the opposite column held in place so that only the column with the mat-expansion panel that was clicked is moving? If there is no such way, is there a way to replicate a mat-expansion panel using mat-card with header and content? I need everything to stay still.
Just like I guessed. You're row content is being align to the center. Change the align-items to for example flex-start to align the row content to the top of the row.
.row {
...
align-items: flex-start;
}
I am using Shopify theme, I am displaying four product in each row. Everything is working perfectly except product column height. I need the equal height of each column. I tried display: tablethe parent class and display:table-cell to child class but still not working. Also tried display:flex
I am sharing the link to code because of my code huge and not allowing me to upload here.
https://jsfiddle.net/a8ag2270/1/
I am getting the output. I need equal height.
Okey, that's the best I can do for now.
https://jsfiddle.net/a8ag2270/49/
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
/* had to target more specifically with (div.grid-view-item) */
/* so the margin: 0px auto 35px; gets overridden */
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0; /* instead of margin: 0px auto 35px; */
}
.grid-view-item__link.grid-view-item__image-container {
display: flex;
flex-direction: column;
flex: 1;
}
/* same story here */
div.grid-view-item__meta {
margin-top: auto; /* override margin-top: 8px; */
}
It can probably be done with a lot fewer styles (or maybe not), but I like flexboxes and working with them, so I used that.
What you need to do on your own is to set min-height to title, description etc. if you want them to be "aligned horizontally" (can't find the right words for that) with each other.
The above styles put the price down, right above the button. If you don't want that behaviour, you can use this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
div.grid-view-item {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}
or this:
.grid.grid--uniform.grid--view-items {
display: flex;
flex-wrap: wrap;
}
.grid__item {
display: flex;
}
div.grid-view-item {
display: flex;
flex-direction: column;
}
.grid-view-item__link.grid-view-item__image-container {
flex: 1;
}
add Below code in your css file:
#Collection > .grid--view-items
{
display: flex;
flex-flow: row wrap;
}
#Collection .grid__item
{
display: flex;
}
#Collection .grid-view-item
{
display: flex;
flex-direction: column;
}
#Collection a.grid-view-item__link.grid-view-item__image-container
{ flex: 1 0 0; }
Just add a style to the grid-view-item__link like
.grid-view-item__link{
height:400px;
}
Change the 400 to whatever height you want.
Here is the fiddle
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! :)
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/