I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div.
HTML CODE
<div class="outercontainer group">
<div class="dividing-row span_1_of_2 col">
<p> here is some text </p>
<aside>
<ol class="category-name">
<li><i class="fa fa-pinterest-p"></i></a></li>
<li><i class="fa fa-flickr"></i></a></li>
</ol>
</aside>
</div>
</div>
CSS CODE
.outercontainer // this keeps all containers the same height in fluid design
{
display: flex;
flex-wrap: wrap;
}
ol.category-name
{
display: inline-block;
color: #FFF;
align-self: flex-end!important; // this does not work
}
Can anyone help? am I missing the obvious?
Many thanks,
p
Here are a few things to consider:
When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.
If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well. In other words, you need to create nested flex containers.
You haven't specified any heights for your containers. So the height of each container is based on the height of the content. If the content is a single row, you really don't have much height.
So in your HTML structure, the flex container is...
<div class="outercontainer group">
and the only flex item is...
<div class="dividing-row span_1_of_2 col">
The <p>, <aside>, <ol> and <li> are regular block elements. Flex properties don't apply.
If you want to use flex properties to align the social media icons at the bottom of the container, you need to make the parent a flex container and give it a height.
Here's a demo with more details: http://jsfiddle.net/f1qnjwd3/1/
Couple of more notes:
In your ordered list, you're missing an opening <a> tag.
In my demo, the heights are for demo purposes only. They may not align perfectly because I wasn't trying to create a perfect layout, just an illustration of how this answer works.
Related
I am new to web development and have been using Bootstrap v4 in my personal projects. As per the grid system mentioned on Bootstrap docs, a row houses columns inside it. I have noticed that Bootstrap row's are flex containers by default and whatever div's I put inside a row behave like flex elements. So they shrink to the content within them.
But if I apply class of col to those divs inside the row, the col divs now fill up the entire row and don't shrink to the size of the content within them. Hence I sometimes prefer to use the child divs within a row without the col class. Also I can directly apply justify-content-center and align-items-center to the row div.
So instead of doing,
<div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>
I prefer to do,
<div class="container">
<div class="row justify-content-center align-items-center">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</div>
Is it a good custom to use rows as flex containers directly or do I have to put columns within them?
I find it difficult to center the content within a column since I end up turning it into a flex container anyways.
In theory, you can use almost anything as flex containers, but .rows in Bootstrap are specially configured as flex containers with negative margins that go well with .col-* classes. Hence I would suggest you stick with this .row and .col-* combinations.
If you want to build a flex container yourself, there are Bootstrap built-in classes you can use, e.g., d-flex, to quickly turn the element into a flexbox.
You can center an element vertically and horizontally if you have the following in its parent:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
And again, there are Bootstrap built-in classes for those as well:
<div class="row">
<div class="col d-flex justify-content-center align-items-center">
<p>Your Content</p>
</div>
</div>
I'm not sure if you think that's quick enough though...
I have built a landing page with the below HTML.
I have also carefully constructed a bootply, showing exactly how the pink div expands too far, and does not cover the screen as intended.
https://www.bootply.com/bYlAS71OWw
I have a pink region that should resize to take up the available space filling the browser, but not creating a scrollbar.
It appears that the breadcrumb, and the heading are not being subtracted from the overall area used.
heading is in a col, and is flex,
.breadcrumb is flex.
The page creates scroller for the combined height of the the heading and breadcrumb.
<app-dashboard>
<div class="app-body">
<main class="main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">
<span tabindex="0">Property Locations</span>
</li>
</ol>
<div class="container-fluid d-flex h-100">
<router-outlet></router-outlet>
<ng-component class="d-flex flex-grow w-100">
<div class="row w-100">
<div class="col">
HEADING
</div>
<div class="d-flex flex-grow bg-pink-300 h-100 w-100">
THIS SHOULD GROW, BUT NOT CREATE A SCROLLBAR
</div>
</div>
</ng-component>
</div>
</main>
</div>
<footer class="app-footer">
<span>
Pander.</span>
<span>
<i class="fa fa-fw fa-code-fork"></i>
</span>
</footer>
</app-dashboard>
The CSS for flex-grow is:
.flex-grow {
flex: 1 0 auto;
}
Please simplify the example (remove custom tags for example). I get only roughly what you are trying to achieve, but a few things first:
What grows and shrinks is flex item, not flex container. And an element only becomes a flex item when its immediate parent is a flex container. Your div with bg-pink-300 is not a flex item because its immediate parent is just a row
It appears that you want to use flexbox to make your div automatically fill the available vertical space. But all your flex containers are horizontal containers, hence vertically you are really just relying on the percentage height.
Generally, your main container should be a vertical flexbox that defines the total vertical space which should not overflow. Your breadcrumb, header, and the pink div all go into this container as flex items. Breadcrumb and header do not need to grow or shrink, they should have flex: none. The pink div can be defined to have flex: 1 1 0 so that it grows and shrinks to obsorb whatever space within the main container after breadcrumb and header have taken their cut.
I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column.
I have this:
I'd like it to look something like this:
I saw an answer here about making a div set to a table cell wrap around:
Wrapping table content around a floating div across multiple rows
Would I have to redo all of this with a table, or is it possible to wrap a flex column around another?
.rowParent,
.columnParent {
display: flex;
}
.columnParent {
flex-direction: column;
}
.flexChild {
flex: 1;
}
#flexymenu {
flex-grow: 2;
height: 100%;
}
.frame {
display: block;
margin: 0 auto;
}
.socialwrap {
display: flex;
}
<div id="container" class="flexChild rowParent">
<div id="rowChild592" class="flexChild">
<h1></h1>
<div class="socialwrap"></div>
</div>
<div id="flexymenu" class="flexChild columnParent">
<div id="columnChild85412" class="flexChild rowParent">
<div id="rowChild97758" class="flexChild"></div>
<div id="rowChild52237" class="flexChild"></div>
</div>
<div id="columnChild59385" class="flexChild selected">
<div class="frame">CONTENT</div>
</div>
</div>
</div>
In flex layout, elements can be aligned along columns or rows. A flex item cannot span between both columns and rows, which could allow the content of one item to wrap around another item. So, flexbox is not a good option for achieving your layout. Read more.
In grid layout, elements can span across columns and rows. A grid item can be configured to take up as many rows and columns as desired, which would allow for the content of one item to wrap around other items, except for one limitation currently in place: The grid area must be rectangular.
This behavior is defined in two parts of the spec.
9. Placing Grid
Items
Every grid item has a grid area, a rectangular set of grid cells that
the grid item occupies.
7.3. Named Areas: the grid-template-areas
property
If a named grid area spans multiple grid cells, but those cells do not
form a single filled-in rectangle, the declaration is invalid.
Note: Non-rectangular or disconnected regions may be permitted in a
future version of this module.
So, for the foreseeable future, tetris-shaped grid areas are not possible, which would make your layout simple and easy.
To wrap your text around images, stick to the good ol' float property. After all, this is exactly what it was designed to do.
And if you're thinking about using float inside a flex or grid container, it won't work. Floats are ignored in both a flex formatting context and grid formatting context.
I have a child div with a table inside it. I want this div to fill out vertically within the parent container.
I have tried different methods, positions, flex, margins, etc., but I cannot get it to stretch out vertically within the parent container.
Essentially I have the following:
<div class="container">
<div class="content">
<div class="GridViewContainer wrapper">
</div>
</div>
</div>
I want GridViewContainer wrapper to fill out the rest of content
I have set up a demo here: ( I set the table div to a fixed height of 400px for demo purposes)
DEMO - https://jsfiddle.net/7ashn3b5/
You're missing display:flex on the parent container.
Since you haven't made .content a flex container, flex-direction:column is being ignored, and flex items are ignoring flex properties.
Once you add display:flex to .content (and remove the height:400px), you can apply flex:1 to .GridViewContainer wrapper, which tells it to stretch the full available height of its parent.
Revised Fiddle
I'm having a little CSS trouble.
I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:
<div class="outer-container">
<div class="inner-container">
<div class="block">text</div>
<div class="block">text</div>
<div class="block">text</div>
<!-- More "block" divs here -->
</div>
</div>
My goal is to find a CSS-based solution that will.
Display the class="block" divs inline, without them wrapping to new lines.
Support a variable number of class="inner-container" divs like the one above, each displayed as its own line.
Have the outer container fluidly "shrink-wrap" to match the width of its contents.
Any suggestions?
Not 100% sure if this is what you're looking for, but it might be a start:
http://jsfiddle.net/r4dEX/3/
By setting each block element to display: inline-block and white-space: nowrap, it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).
Each inner-container will display on its own line (display: block is default behaviour for a div).
Setting the outer container to display: inline-block will cause it to 'shrink wrap' to fit its content.
Here is an example where the blocks are inline, the inner-containers have a fixed width, and the outer-container is shrinking to fit.