ratracegrad

[[1590703686217,[{"id":"ace","s":37,"fk":6,"i":0},{"id":"acrylamid","s":282,"fk":41,"i":44},{"id":"adm-dev-kit","s":30,"fk":5,"i":11},{"id":"amsf","s":255,"fk":149,"i":18},{"id":"anodize","s":4,"fk":0,"i":0},{"id":"antora","f":705,"s":267,"fk":98,"i":156},{"id":"antwar","s":462,"fk":34,"i":7},{"id":"asimov-static","s":4,"fk":3,"i":0},{"id":"assemble","s":3795,"fk":265,"i":29},{"id":"awestruct","s":272,"fk":83,"i":54},{"id":"bake","s":35,"fk":8,"i":0},{"id":"bakeit","s":2,"fk":2,"i":0},{"id":"baker","s":41,"fk":5,"i":1},{"id":"bang","s":7,"fk":1,"i":0},{"id":"bashblog-ng","s":15,"fk":5,"i":1},{"id":"bashblog","s":966,"fk":156,"i":22},{"id":"blackhole","s":121,"fk":8,"i":1},{"id":"blacksmith","s":563,"fk":42,"i":27},{"id":"blended","s":19,"fk":2,"i":2},{"id":"blo","s":9,"fk":5,"i":2},{"id":"blog.sh","s":9,"fk":1,"i":0},{"id":"blogc","s":129,"fk":9,"i":3},{"id":"blogdown-r","s":1153,"fk":267,"i":14},{"id":"blogdown","s":17,"fk":1,"i":9},{"id":"blogo","s":17,"fk":6,"i":5},{"id":"blogofile","s":334,"fk":89,"i":45}

ratracegrad

.flexContainer {
    display: flex;
}
.flexSpaceAround {
    justify-content: space-around;
}
.subContainer {
    width: 80%;
    margin: 0 auto;
}

ratracegrad

<p>Below is a demonstration of a 3 column responsive layout. I have added borders to the columns so you can see that there is padding between and around each column.</p>
<div class="flexContainer flexSpaceAround">
    <div class="col">
What? We're not at all alike! Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Yesterday I did not know how to eat gagh. I'd like to think that I haven't changed those things, sir. Computer, belay that order. Travel time to the nearest starbase? Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. That might've been one of the shortest assignments in the history of Starfleet.                </div>
    <div class="col">
What? We're not at all alike! Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us

ratracegrad

.container {
    width: 60%;
    margin: 50px auto;
    background: white;
    border-radius: 8px;
    padding: 50px; 25px;
    border: 1px solid gray;
    box-shadow: 7px 7px 7px #777777;
}
.flexContainer {

ratracegrad

<div class="container">
    <h2>Input Addon</h2>
    <p>With FlexBox it is easy to place an add-on to the start of an input or
        a button to the end of an input. An add-on can be text or an image. An add-on
        is used to explain to a user what type of information should be put in the
        input field.</p>
    <hr>
    <h3>Example of Addon</h3>

    <div class="flexContainer marginBottom">

ratracegrad

.flexContainer {
    display: flex;
}
.flexItem {
    flex: 1;
}
.flexColumn {
    flex-direction: column;
}
.fullHeight {

ratracegrad

<div class="flexContainer flexColumn fullHeight whiteBackground">
    <nav class="flexContainer blueBackground">
        <ul class="nav flexItem flexStart">
            <li><a href="#">Company Name</a></li>
        </ul>
        <ul class="nav flexContainer flexEnd">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Careers</a></li>

ratracegrad

.flexContainer {
    display: flex;
}
.flexCenter {
    justify-content: center;
}
.fullHeight {
    height: 100vh;
}
.itemCenter {

ratracegrad

<div class="flexContainer flexCenter itemCenter fullHeight centerImage">
    <div class="flexContainer flexCenter itemCenter fullHeight">
        <a href="index.html" class="homeButton">Return Home</a>
    </div>
</div>

ratracegrad

.flexContainer {
    display: flex;
}
.flexItem {
    flex: 1;
}
.flexStart {
    justify-content: flex-start;
}
.flexEnd {