Making divs inside flex boxes shrink-wrap - css

How would one go about making these div flex boxes shrink-wrap?
Ie. making these:
Into these:
http://jsfiddle.net/frank_o/35hk7L84/1/
As if one were to set flex-direction: row; except I can't have them on the same line.
.main {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>

Here is what you are looking for (change the display of the individual elements):
.main {
display: inline-flex;
flex-direction:column;
}
.other {
color: white;
background: blue;
margin: 10px;
display:table;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
Useful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can do this using following code.
for more reference and also generating code for flex with all properties you can go through following link
http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655
http://the-echoplex.net/flexyboxes/
.main {
display: inline-flex;
flex-direction: column;
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
</div>

You will get what do u need that is every element having different size with shrinking itself as width of element but without using flex.
.other {
clear:both;
color: white;
background: blue;
margin: 10px;
float: left;
}
<div class="main">
<div class="other">
<p>H</p>
</div>
<div class="other">
<p>Hello world </p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello</p>
</div>
<div class="other">
<p>Hello world12345678</p>
</div>
</div>

I've had sucess with the following:
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;

Related

Flexbox make columns equal heights

I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks
Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>

CSS Select first occurrence of a class only

I need to add a style to the first occurrence of a class (.border) but not the others.
HTML
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
CSS
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col .border{
border: solid;
}
https://jsfiddle.net/stemon/qw9ezu2h/2/
First method
use direct child(>) selector in CSS.
.col > div >.border{
border: solid;
}
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col > div >.border{
border: solid;
}
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
Second method
simply use .col section .border{} get second and third occurenece of class border to disable border to them by,
.col .border{
border: solid;
}
.col section .border{
border:none;
}
.col{
padding: 100px;
}
.col section{
display: flex;
justify-content: space-around;
padding: 50px;
}
.col .border{
border: solid;
}
.col section .border{
border:none;
}
<div class="col">
<div>
<div class="border">
<section>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
<div>
<div>
<div class="border">No Border</div>
</div>
</div>
</section>
</div>
</div>
</div>
You should to do this:
.col > div > .border{
... your code...
}

Margin auto container combined with a flexbox section content

So i made some tests with a container with a fixed width but i want to use flexbox too.
So i want to make a webpage with all elements being inside the container and i combine the section with flexbox too.
Is this a correct way of creating the layout? Or i should remove the .container and only using flexbox?
Markup:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: normal 1rem/1.5 sans-serif;
}
#showcase {
background: #888;
color: #fff;
padding: 1rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: red;
}
.showcase-content {
display: flex;
justify-content: center;
height: 200px;
}
<section id="showcase">
<div class="container showcase-content">
<div class="box">
<h4>Box 1</h4>
</div>
<div class="box">
<h4>Box 2</h4>
</div>
<div class="box">
<h4>Box 3</h4>
</div>
<div class="box">
<h4>Box 4</h4>
</div>
<div class="box">
<h4>Box 5</h4>
</div>
</div>
</section>

How to make div expand with content using flex?

I have this HTML and CSS:
.container {
width: 100%;
}
.group {
display: flex;
justify-content: space-between;
min-width: 214px;
background: #eee;
}
.abbr {
/* some styling */
}
.name {
/* some styling */
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div>
Now, if I use just min-width, the whole div stretches as the entire width of the container. If I just use width, it won't expand if the name is longer than Mark Smith (rather it will go to the next line).
This is what I wanted to achieve:
How do I achieve this in flexbox?
What you're looking for is to apply width: fit-content to .group.
Then you can adjust the offset between the abbreviation and name with min-width on the .abbr.
This can be seen in the following:
.group {
display: flex;
width: fit-content;
background: #eee;
margin: 10px 0;
}
.group > div {
margin: 0 10px;
}
.abbr {
min-width: 50px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">A Really Really Long Name</p>
</div>
</div>
</div>
I use inline-block on .container so that it won't take up the whole line.
.container {
display: inline-block;
}
.group {
display: flex;
background: #eee;
}
.abbr {
padding: 0 7px;
}
.name {
padding: 0 7px;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div>
<p class="name">Mark Smith</p>
</div>
</div>
</div><br/><br/>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div>
<p class="name">Loooooooooooooooong Name</p>
</div>
</div>
</div>
Another solution is to use a third element that consume all the remaining space and set the background color on the text content only:
.container {
margin: 0 0 5px 0;
}
.group {
display: flex;
}
.abbr {
padding: 0 7px;
background: #eee;
}
.name {
padding: 0 7px;
background: #eee;
flex: 0 0 auto;
}
.blank-space{
flex: 1 1 auto;
}
<div class="container">
<div class="group">
<div class="abbr">
<p>MS</p>
</div>
<div class="name">
<p>Mark Smith</p>
</div>
<div class="blank-space"></div>
</div>
</div>
<div class="container">
<div class="group">
<div class="abbr">
<p>MR</p>
</div>
<div class="name">
<p>Loooooooooooooooong Name</p>
</div>
<div class="blank-space"></div>
</div>
</div>

How to use CSS to create a matrix of cells, and not use HTML tags at all

I wish to create a matrix of cells with the names of people. I want to create a 3 by 3 matrix of names. So far I just have one row of names, but I want to add another two rows. I know I can do this using the HTML "tr" and "td" tags, but is there a way I can do this purely using CSS?
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgray}
div {
float:left;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<div>James</div><div>Richard</div><div>Kevin</div>
</body>
</html>
You can try using flexbox:
.flex {
font: 14px Arial;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > div {
flex: 1 1 auto;
width: 33.3%;
box-sizing:border-box;
border:1px solid black;
text-align:center;
line-height:20px;
padding:5px;
}
<div class="flex">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
Nice Link to Learn also check the support
CSS3 has columns property:
.divTable
{
-webkit-columns: 1px 3;
-moz-columns: 1px 3;
columns: 1px 3;
}
<div class='divTable'>
<div>James</div><div>Richard</div><div>Kevin</div>
<div>James</div><div>Richard</div><div>Kevin</div>
<div>James</div><div>Richard</div><div>Kevin</div>
</div>
It forms columns first and then rows (all Jameses will go to the first row). But it flexible with regards to the width.
You could keep using div elements and still achieve your 3x3 matrix by just wrapping every row with a div.
.row{
width: 390px;
}
.row div{
float:left;
width: 50px;
padding: 25px;
border: 5px solid black;
margin: 10px;
}
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
<div class="row">
<div>James</div>
<div>Richard</div>
<div>Kevin</div>
</div>
How about this:
<style>
.main div {
float:left;
margin:3px;
width:80px;
height:80px;
background-color:#ccc;
}
.main div:nth-child(3n+1) {
clear:left;
}
</style>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>

Resources