flexbox space-between和align right

时间:2015-10-22 09:56:22

标签: css css3 flexbox

我有一个包含1到3个项目的div,我希望它们的行为如下:

  1. 三项:用"it is positive"

    取整行
    justify-content: space-between
  2. 如果只有1个项目,请将其对齐。

    +-----------+
    | 1 | 2 | 3 |
    +-----------+
    
  3. 这是我的代码:

    
    
    +-----------+
    |       | 3 |
    +-----------+
    
    
    .container {
      display: flex;
      width: 300px;
      justify-content: space-between;
      /* Styling only */
      padding: 10px;
      background: #ccc;
      margin-bottom: 10px;
    }
    .container div {
      /* Styling only */
      background: white;
      padding: 20px 40px;
      width: 10px;
    }
    
    
    

    我找到了<div class="container"> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div class="container"> <div> 3 </div> </div>的解决方案,但我希望这个解决方案不那么简单,我不想重新安排我的dom。

    有什么想法吗?

3 个答案:

答案 0 :(得分:33)

有一个选择器。

//String to Date Convert

var dateString = "2014-01-12"
var dateFormatter = NSDateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd"
let s = dateFormatter.dateFromString(dateString)
println(s)


//CONVERT FROM NSDate to String  

let date = NSDate()
var dateFormatter = NSDateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd" 
var dateString = dateFormatter.stringFromDate(date)
println(dateString)  

&#13;
&#13;
.container div:only-child {
  margin-left: auto;
}
&#13;
.container {
  display: flex;
  width: 300px;
  justify-content: space-between;
  /* Styling only */
  padding: 10px;
  background: #ccc;
  margin-bottom: 10px;
}
.container div {
  /* Styling only */
  background: white;
  padding: 20px 40px;
  width: 10px;
}
.container div:only-child {
  align-self: flex-end;
  margin-left: auto;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

使用flex-direction属性

.container {
  flex-direction:row-reverse;
}

.container {
  display: flex;
  width: 300px;
  justify-content: space-between;
  flex-direction:row-reverse;
  /* Styling only */
  padding: 10px;
  background: #ccc;
  margin-bottom: 10px;
}
.container div {
  /* Styling only */
  background: white;
  padding: 20px 40px;
  width: 10px;
}
<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
</div>

<div class="container">
  <div>
    3
  </div>
</div>

答案 2 :(得分:-2)

更改

s = X_train.drop('Name', axis=1).select_dtypes(object).mode().iloc[0].append(X_train.median())
print (s)
Gender                  M
Type of job       Skilled
Default                 0
Income             470000
Age                  32.5
Amt of credit       65000
Years employed         10
dtype: object

X_train = X_train.fillna(s)
print (X_train)
   Default    Income   Age   Name Gender    Type of job  Amt of credit  \
0        1  250000.0  20.0  Allen      M        Skilled        65000.0   
1        0  400000.0  30.0   Sara      F      Unskilled        30000.0   
2        0  470000.0  40.0   Lily      F  Super skilled        50000.0   
3        0  440000.0  35.0   Rock      M  Super skilled        80000.0   
4        0  500000.0  25.0  David      M        Skilled        40000.0   
5        0  700000.0  40.0   Rose      F        Skilled       100000.0   
6        1  800000.0  32.5    Mat      M        Skilled       300000.0   

   Years employed  
0               1  
1              10  
2              12  
3               6  
4               4  
5              13  
6              12  

X_train=X_train.replace('NAN',np.NaN)

$removed column Name
X_train = X_train.drop('Name', axis=1)
#original order of columns
cols = X_train.columns

X_train_numeric=X_train.select_dtypes(include=['int', 'float']).columns
#joined columns numeric and non numeric
X_train_non_numeric=X_train.select_dtypes(exclude=['int', 'float']).columns
new = X_train_numeric.tolist() + X_train_non_numeric.tolist()

from sklearn.impute import SimpleImputer
from sklearn.compose import ColumnTransformer
t = [('num', SimpleImputer(strategy='median'), X_train_numeric),
('cat', SimpleImputer(strategy='most_frequent'), X_train_non_numeric)]
transformer = ColumnTransformer(transformers=t, remainder='passthrough')
X_train = transformer.fit_transform(X_train) #numpy array

#DataFrame constructor with new columns names and added reindex for change by original order
X_train = pd.DataFrame(X_train, columns=new).reindex(cols, axis=1)
print (X_train)
  Default  Income   Age Gender    Type of job Amt of credit Years employed
0       1  250000    20      M        Skilled         65000              1
1       0  400000    30      F      Unskilled         30000             10
2       0  470000    40      F  Super skilled         50000             12
3       0  440000    35      M  Super skilled         80000              6
4       0  500000    25      M        Skilled         40000              4
5       0  700000    40      F        Skilled        100000             13
6       1  800000  32.5      M        Skilled        300000             12