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>
Related
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>
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>
I have modular grid of cards with and without image, based on flexbox.
Normally cards without image are 50% of the width, cards with image are 100% of the width, and those cards without image that doesn't have a pair are also 100%.
----------------
[[ txt ][ img ]] – card with an image
----------------
[ txt ][ txt ] – 2 cards without image
----------------
[ txt ] – card without image
----------------
[[ txt ][ img ]] – card with an image
----------------
Is it possible to maintain ratio of the cards and its content while resize, and also maintain modularity with css?
Here's the code
that let me maintain ratio, but when I try to apply this technique to cards children everything breakes
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
.wrapper
display: flex
flex-wrap: wrap
justify-content: space-between
width: 620px
.card
height: 0
padding-bottom: 50%
display: flex
flex-direction: row
justify-content: space-between
flex: 1 1 300px
.has-card-image .card-text,
.has-card-image .card-image
height: 300px
width: 300px
I can see one way this could be done w/o script.
Either as in this case, using px values, or e.g. using vw, and the reason is that the card-text and card-image needs to know the wrapper's width to be able to size according to the expected output (which mean percent can't be used).
Fiddle demo
Stack snippet
.wrapper {
display: flex;
flex-wrap: wrap;
width: 600px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text, .card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
If you need the margin, you'll need an extra wrapper
Fiddle demo
Stack snippet
.wrapper {
width: 620px;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 300px;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 300px;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 300px;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
Updated
Here is a version using vw and margin, and is responsive.
Note, the make up for margin set on the wrapper can also be set on each item, though I found it simpler like this.
Fiddle demo
Stack snippet
.wrapper {
width: calc(80vw + 20px); /* 20px extra for margin */
margin: 0 auto;
overflow: hidden;
}
.inner {
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.card {
display: flex;
flex: 1 40vw;
}
.card .card-text,
.card .card-image {
height: 100px;
width: 40vw;
margin-left: 20px;
}
.card .card-text:only-child {
flex: 1 40vw;
}
/* demo styles */
.card .card-text,
.card .card-image {
border: 1px solid;
box-sizing: border-box;
}
.card .card-text::before {
content: 'text';
}
.card .card-image::before {
content: 'image';
}
<div class="wrapper">
<div class="inner">
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
</div>
<div class="card">
<div class="card-text">
</div>
<div class="card-image">
</div>
</div>
</div>
</div>
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>
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;