Prawidłowe ułożenie przycisku

pytanie zadane 26 lutego 2018 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

Witam mam problem z przyciskiem ,,powrót" https://codepen.io/KingShadow/pen/OQBGPb Nie wiem jak go prawidłowo ustawić. Aktualnie jest tak że przesuwa tagi w prawo a chciałbym żeby tagi były na środku a przycisk nad nimi z lewej strony. Z góry dzięki za pomoc ;D

2 odpowiedzi

odpowiedź 26 lutego 2018 przez gremlin Dyskutant (7,600 p.)

Dopisz w .box

display: flex;
align-items: center;
flex-direction: column;

a w .button dopisz:

align-self: flex-start;

komentarz 26 lutego 2018 przez ShadoWs Bywalec (2,800 p.)

O dzięki wielkie. Tyle się męczyłem

komentarz 26 lutego 2018 przez gremlin Dyskutant (7,600 p.)

polecam jeśli nie znasz:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 26 lutego 2018 przez ShadoWs Bywalec (2,800 p.)

Dzięki za link na pewno zajrzę :)

odpowiedź 26 lutego 2018 przez dervil Gaduła (3,030 p.)

moim zdaniem rozwiązanie z flexem nie jest za dobre, wystarczyło zrobić tak

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: 'Exo 2', sans-serif;
    background-color: #F6F6F6
}

.box {
    margin-top: 10px;
    background: white;
    padding: 20px;
    width: 70%;
    margin: auto;
    margin-top: 80px;
}

.tags {
    margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}

.tags a {
    border: 2px solid #ecf0f1;
    padding: 7px;
    text-transform: uppercase;
    font-size: 12px;
    color: #95a5a6;
    text-decoration: none;
}

.tags a:hover {
    border: 2px solid #e67e22;
    color: #e67e22;
}
.button {
    border: 2px solid #e67e22;
    color: #e67e22;
    padding: 7px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    background-color: Transparent;
}

.button:hover {
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    cursor: pointer;
    background-color: #e67e22;
    color: #ecf0f1;
}