FLEXBOX

hh

by Henning Johnsen

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="flex-container1">
        
        <div class="flex-item-1_1">
            <div class="flex-container2">
                <div class="flex-item-2_1">
                    <label>Fritekst 1</label>
                    <input type="text" class="normal normalfocus" id="nofritekst1">
                    <label>Fritekst 2</label>
                    <input type="text" class="normal normalfocus" id="nofritekst2">
                </div>
            </div>

            <div class="flex-container2">
                <div class="flex-item-2_1">
                    <label>Fritekst 1</label>
                    <input type="text" class="normal normalfocus" id="nofritekst12">
                    <label>Fritekst 2</label>
                    <input type="text" class="normal normalfocus" id="nofritekst22">
                    <label>Privat</label>
                    <input type="text" class="normal normalfocus" id="nofritekst32">
                </div>
            </div>
        </div>

    <div class="flex-item-1_1">
        <div class="flex-container2">
            <div class="flex-item-2_1">
                <label>Fritekst 1x</label>
                <input type="text" class="normal normalfocus" id="nofritekst13">
                     <div>
                         <div style="float: left; margin-bottom: 5px">
                             <label>Postnr</label>
                             <input type="text" style="width:50px" class="normal normalfocus" id="pepostnr">
                         </div>
                         <div style="float: right; margin-bottom: 5px">
                             <label>Poststed</label>
                             <input type="text" style="width:100px" class="normal normalfocus"...

CSS

.flex-container1 {
            display:flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
            padding: 10px 10px 0 10px;
        }
        .flex-item-1_1 {

            flex-grow: 1;
            flex-basis: auto;
        }

        .flex-container2 {
            display:flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-content: flex-start;
            align-items: flex-start;
            margin: 10px 10px 20px 10px;
        }
        .flex-item-2_1 {

            flex-grow: 1;
            flex-basis: auto;
            border: 1px solid #D4D7C3;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-color: #ECECEC;
            margin-bottom: 0px;
            padding: 0 10px 10px 10px;
        }

        label {
             display: block;
             margin: 5px 0 5px 2px;
             color: #777;
             text-shadow: 1px 1px 0 #fff;
             outline: 0;
             padding: 0;
             vertical-align: baseline;
             font-family: "Segoe UI", "Lucida Grande", tahoma, arial, verdana, sans-serif; font-size: 14px;
         }