CSS Cheatsheet

Collapsed Margins

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px 0 15px 0;
}

Why does this CSS margin-top style not work?

Float left

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
    float: left;
}

background vom Parent ist transparent?

Parent hat nun auch float left! Background wieder da!

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    float: left;
}

Letztes div nicht mehr float left

        <div class="flexelement-clear">Box 4</div>
        <div class="flexelement">Box 5</div>

.flexelement-clear
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
    clear: left;
}

Flexbox kein Wraparound?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
        <div class="flexelement">Box 5</div>
        <div class="flexelement">Box 6</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Flexbox Menu-Punkte mit justify-content: flex-end

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 10px;
    padding: 15px;
}

Flexbox align-items

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement">Box 1 asdf sasdf asdf sd fasdf asf sadfas fasdf asdfasdf saafd</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1% 0;
    padding: 15px 0 15px 0;
    width: 20%;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Nav</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="flexbox">
        <div class="flexelement box1">Box 1</div>
        <div class="flexelement">Box 2</div>
        <div class="flexelement">Box 3</div>
        <div class="flexelement">Box 4</div>
    </div>
</body>
</html>

html {
    background: #afafaf;
}

.flexbox
{
    width: 90%;
    margin: 5%;
    background: #dadada;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

.flexelement
{
    background: #ff6600;
    color: #ffffff;
    text-align: center;
    margin: 0 0 1% 0;
    padding: 15px 0 15px 0;
}

.box1 {
    font-size: 50px;
}

Leave a Reply Cancel reply