I'm having a lot of trouble setting a div to appear under another div (like they do normally).
I'musing MaterializeCSS. My layout is as follows:
<div class="container valign-wrapper">
<div class="customClass"></div>
<div class="customClass"></div>
</div>
And css:
.valign-wrapper{
display: flex;
align-items: center;
}
.customClass{
margin: 0 auto;
/* text and font css */
}
However , even adding width:100% or changing display class won't make the two divs appear vertically, they appear side by side. I found out that removing valign-wrapper class will work, but my items will obviously appear at the top of the site...
If anyone has encountered the same problem I would appreciate the help!
You need to add the flex direction:
.valign-wrapper { flex-direction: column; }
That way, flex items are positioned as a column. Alternatively, if you need to go with flex-direction: row; (default), you can use
.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }
to still maintain the row style but have your two items wrap and eventually positioned above each other.
Even though the post is from 2013, it still teaches the magic of flexbox in a nice way and I can just recommend everyone to read about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
i want the items in flexbox not to come out of flexbox when the div's width next to flexbox is increased.
consider i have a flexbox container which has items such as svg, input field and div with simple text. Next to this flexbox container i have one side panel. This side panel can be resized..meaning when user drags the side panel sideways its width either increases or decreases. In doing so, the flexbox container is shrunk and hence the items in flexbox come out of it...how can i avoid it? how can i make sure that even when the sidepanel is dragged the flexbox items should stay intact?
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;}}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<Svgsearch/><input type=text/>
</div>
</div>
<div>dropdown to be added</div>
</div>
Could someone help me with it? thanks.
You can use flex-wrap to make the items drop down to another row if they are larger than their container:
display: flex;
flex-wrap: wrap;
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
If you want the items to remain on one line then i would give them percentage widths.
I'm trying to achieve the following layout with dynamic content:
code:
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
<div class="container">
<span>Published</span>
<span>Song title</span>
<span>Edit song</span>
</div>
What would be the best way to go about it, taking into account that sometimes the texts in each span don't always appear, I want they layout to be fixed so that even if one of the texts doesn't appear they always remain in the same place. Thanks!
The original code above I tried with display:flex doesn't work because when the text doesn't appear the grid collapses.
add the following css
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
https://jsfiddle.net/hxazcg71/
I have three columns within the flex box container, two visible and one hidden. The first two have very little content; the third one has several pages of content. I want all three to be initially vertically centered, but since the third one will overflow off the page, I want it (when made visible) to end up filling to the top of the page and then scrolling down. How can I have centred items in the flex box that overflow naturally in this way?
What's happening now in my code below is that when the third column is made visible, it overflows off the top and bottom of the page, without scroll, so that its impossible to read the first part of the content.
HTML:
<div class="flex-container">
<div class="column column-left">
column one
</div>
<div class="column column-right">
column two
</div>
<div class="column-hidden column" data-id="1">
column three
</div>
</div>
CSS:
body{
margin:0;
}
html, body{
height: 100%;
}
.flex-container{
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.column{
padding: 0 1em 0 1em;
}
.column-left{
display: visible;
}
.column-right{
display: visible;
border: none;
text-align: left;
}
.column-hidden{
display: none;
}
Javascript:
//clicking on button does the following to show hidden column
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');
Played a bit with your code. I rearranged align-items from .flex-container to .column, which is also display: flex;. For scrolling I think you should have additional absolutely positioned container for the content.. I used P.
Sample here http://codepen.io/vkjgr/pen/gpqLLZ
p.s. Some hints about your code. flex-direction's initial value is row, so you don't have to write it. And visible is not a property of display ;)
Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong?
Here is the pen: http://codepen.io/iaezzy/pen/GggVxe
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
You might have to increase the preview pane height for the flexbox to work.
Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see h2 and p bordered, they have the float declaration, but don't float.
You have set display: flex on both section as well as div.
If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.
Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/
.fill-height-or-more {
display: flex;
flex-direction: column;
...
}
.fill-height-or-more > div {
flex: 1;
...
}
.some-area > div p {
width: 40%;
float: left;
...
}
Flex items are always rendered as blocks because flex layout only makes sense in a block-like layout. There are a few differences between flex items and block-level boxes which are covered in sections 3 and 4 of the spec, one being that flex items cannot float either, again because this would disrupt the flex layout (and conversely, neither can outside floats intrude into a flex layout).
You can apply different values of display to flex items (and hide them altogether with display: none), but this will only have the effect of establishing various formatting contexts for the children of the flex items, not the items themselves.
This includes display: flex, as you're demonstrating; what happens then is that the flex items become flex containers for their own children, which makes those children flex items in your nested flex formatting contexts. Because of this, floating those children won't work.
Note that in order to establish a flex layout, you only need to set display: flex on the flex container, not its children. All the children of a flex container that are not display: none will automatically be made flex items.
for displaing inline elements inside flex dispaly, there is anther solution to use display: inline-table however it does not seem it support float as well but you can workarwond this by wrapping it with anther div or something
check the following jsfiddle https://jsfiddle.net/reda84/eesuxLgu/
.row{
width:100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > .col {
display: flex;
box-sizing: border-box;
width:50%;
float:left;
flex-direction: column;
border:1px solid #333;
min-height:100px;
padding:15px
}
.tag{
background: #1b8fe7;
color:#fff;
padding:5px 10px;
display: inline-table;
margin:0px 5px 5px 0;
}
For people trying to display inline element inside a flex container and finding this page, you just need to wrap your content one level higher in a flex element.
Example:
Not
<label style="display:flex">
A block label from a form <br>
<i>This idiomatic element is a block box and not its inline default</span>
</label>
but
<div style="display:flex">
<label>
A block label from a form <br>
<i>This idiomatic is an inline box and does not become a block</i>
</label>
</div>
The more I think about this the less feasible it seems, but I was wondering if there was a way to control a flex item's margin based on how it has been laid out in the flex flow.
A screenshot probably explains it best:
The 'captured pieces' divs are in a flex container, which is a sibling to the div with the move history in it. The captured pieces container, and the history, are themselves flex items in another container. Each captured pieces div has a 3px top margin, to space them out from each other and from the history.
The problem is when there is enough space to display the history div and the 'captured pieces' container side by side, as shown here by artificially shrinking the history div:
When they're side by side like this, the 3px top margin is unnecessary - I'd like the top of the 'opponent's captured pieces' to line up with the top of the history.
Is there any way to achieve this with CSS?
Here's the CSS for the relevant divs:
div.history_and_captured {
display: flex;
flex-wrap: wrap;
}
div.game_history {
flex-basis: 15em;
flex-grow: 1;
}
div.captured_pieces_container {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
And the HTML:
<div class="history_and_captured">
<div class="game_history" id="history">
<!--history widget is created dynamically-->
</div>
<div class="captured_pieces_container">
<div class="captured_pieces" id="captured_pieces_opponent">
opponent's captured pieces
</div>
<div class="captured_pieces" id="captured_pieces_player">
player's captured pieces
</div>
</div>
</div>